A Pen by Dean Wagman.

index.html

<div class="container">
  <h1>List of largest companies by revenue</h1>
 
  <table>
    <thead>
      <tr>
        <th data-priority="1">Ranking</th>
        <th data-priority="2">Company</th>
        <th data-priority="4">Industry</th>
        <th data-priority="3">Revenue</th>
        <th data-priority="5">Employees</th>
        <th data-priority="6">Country</th>
        <th data-priority="7">CEO</th>
        <th class="more">More</td>
      </tr>
    </thead>
    <tbody>
      <!-- Walmart -->
      <tr>
        <td data-priority="1">1</td>
        <td data-priority="2">Wal-Mart Stores, Inc.</td>
        <td data-priority="4">Retail</td>
        <td data-priority="3">$476B</td>
        <td data-priority="5">2,200,000</td>
        <td data-priority="6">United States</td>
        <td data-priority="7">Doug McMillon</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>Wal-Mart Stores, Inc</li>
            <li>Retail</li>
            <li>$476 Billion in Revenue</li>
            <li>2,200,000 Employees</li>
            <li>Headquartered in the United States</li>
            <li>CEO'd by Doug McMillon</li>
          </ul>
        </td>
      </tr>
      <!-- Shell -->
      <tr>
        <td data-priority="1">2</td>
        <td data-priority="2">Royal Dutch Shell</td>
        <td data-priority="4">Oil and gas</td>
        <td data-priority="3">$451B</td>
        <td data-priority="5">90,000</td>
        <td data-priority="6">England</td>
        <td data-priority="7">Ben van Beurden</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>Royal Dutch Shell</li>
            <li>Oil and gas</li>
            <li>$451 Billion in Revenue</li>
            <li>90,000 Employees</li>
            <li>Headquartered in England</li>
            <li>CEO'd by Ben van Beurden</li>
          </ul>
        </td>
      </tr>
      <!--Exxon -->
      <tr>
        <td data-priority="1">3</td>
        <td data-priority="2">Exxon Mobil Corporation</td>
        <td data-priority="4">Oil and gas</td>
        <td data-priority="3">$420B</td>
        <td data-priority="5">76,900</td>
        <td data-priority="6">United States</td>
        <td data-priority="7">Rex W. Tillerson</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>Exxon Mobil Corporation</li>
            <li>oil and Gas</li>
            <li>$420 Billion in Revenue</li>
            <li>76,900 Employees</li>
            <li>Headquartered in the United States</li>
            <li>CEO'd by Rex W. Tillerson</li>
          </ul>
        </td>
      </tr>
      <!--CNPC -->
      <tr>
        <td data-priority="1">4</td>
        <td data-priority="2">China National Petroleum Corporation</td>
        <td data-priority="4">Oil and gas</td>
        <td data-priority="3">$425B</td>
        <td data-priority="5">1,668,072</td>
        <td data-priority="6">China</td>
        <td data-priority="7">Zhou Jiping</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>China National Petroleum Corporation</li>
            <li>Oil and Gas</li>
            <li>$425 Billion in Revenue</li>
            <li>1,668,072 Employees</li>
            <li>Headquartered in the China</li>
            <li>CEO'd by Zhou Jiping</li>
          </ul>
        </td>
      </tr>
      <!-- Sinopec Group -->
      <tr>
        <td data-priority="1">5</td>
        <td data-priority="2">Sinopec Group</td>
        <td data-priority="4">Oil and gas</td>
        <td data-priority="3">$411B</td>
        <td data-priority="5">401,000</td>
        <td data-priority="6">China</td>
        <td data-priority="7">Wang Tianpu</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>Sinopec Group</li>
            <li>Oil and Gas</li>
            <li>$411 Billion in Revenue</li>
            <li>401,000 Employees</li>
            <li>Headquartered in the China</li>
            <li>CEO'd by Wang Tianpu</li>
          </ul>
        </td>
      </tr>
      <!-- BP -->
      <tr>
        <td data-priority="1">6</td>
        <td data-priority="2">BP</td>
        <td data-priority="4">Oil and gas</td>
        <td data-priority="3">$379B</td>
        <td data-priority="5">83,900</td>
        <td data-priority="6">England</td>
        <td data-priority="7">Ben van Beurden</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>BP</li>
            <li>Oil and Gas</li>
            <li>$379 Billion in Revenue</li>
            <li>83,900 Employees</li>
            <li>Headquartered in the England</li>
            <li>CEO'd by Ben van Beurden</li>
          </ul>
        </td>
      </tr>
      <!--Saudi Aramco -->
      <tr>
        <td data-priority="1">7</td>
        <td data-priority="2">Saudi Aramco</td>
        <td data-priority="4">Oil and gas</td>
        <td data-priority="3">$311B</td>
        <td data-priority="5">54,041</td>
        <td data-priority="6">Saudi Arabia</td>
        <td data-priority="7">Khalid A. Al-Falih</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>Saudi Aramco</li>
            <li>Oil and gas</li>
            <li>$476 Billion in Revenue</li>
            <li>54,041 Employees</li>
            <li>Headquartered in Saudi Arabia</li>
            <li>CEO'd by Khalid A. Al-Falih</li>
          </ul>
        </td>
      </tr>
      <!-- Vitol -->
      <tr>
        <td data-priority="1">8</td>
        <td data-priority="2">Vitol</td>
        <td data-priority="4">Commodities</td>
        <td data-priority="3">$303B</td>
        <td data-priority="5">2,800</td>
        <td data-priority="6">Netherlands</td>
        <td data-priority="7">Ian Taylor</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>Vitol</li>
            <li>Commodities</li>
            <li>$303 Billion in Revenue</li>
            <li>2,800 Employees</li>
            <li>Headquartered in the Netherlands</li>
            <li>CEO'd by Ian Taylor</li>
          </ul>
        </td>
      </tr>
      <!-- China Power -->
      <tr>
        <td data-priority="1">9</td>
        <td data-priority="2">State Grid Corporation of China</td>
        <td data-priority="4">Electric utility</td>
        <td data-priority="3">$290B</td>
        <td data-priority="5">1,564,000</td>
        <td data-priority="6">China</td>
        <td data-priority="7">Liu Zhenya</td>
        <td class="more"><span class="entypo-down-open"></span></td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>State Grid Corporation of China</li>
            <li>Electric utility</li>
            <li>$290 Billion in Revenue</li>
            <li>1,564,000 Employees</li>
            <li>Headquartered in China</li>
            <li>CEO'd by Liu Zhenya</li>
          </ul>
        </td>
      </tr>
      <!-- Total -->
      <tr>
        <td data-priority="1">10</td>
        <td data-priority="2">Total</td>
        <td data-priority="4">Oil and gas</td>
        <td data-priority="3">$240B</td>
        <td data-priority="5">111,000</td>
        <td data-priority="6">France</td>
        <td data-priority="7">Christophe de Margerie</td>
        <td class="more">
         <span class="entypo-down-open"></span>
        </td>
      </tr>
      <tr class="drawer">
        <td colspan="4">
          <ul>
            <li>Total</li>
            <li>Oil and gas</li>
            <li>$240 Billion in Revenue</li>
            <li>111,000 Employees</li>
            <li>Headquartered in France</li>
            <li>CEO'd by Christophe de Margerie</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table> 
  

  
  <!-- Cache Monet Image -->
  <svg version="1.1" id ="money">
<path d="M0,431.5h448v-288H0V431.5z M32,239.5c35.344,0,64-28.656,64-64h256c0,35.344,28.656,64,64,64v96c-35.344,0-64,28.656-64,64
	H96c0-35.344-28.656-64-64-64V239.5z M144,287.5c0-44.188,35.813-80,80-80s80,35.813,80,80s-35.813,80-80,80S144,331.688,144,287.5z
	 M512,79.5v320h-32v-288H32v-32H512z"/>
  </svg>
</div>

Responsive-Table.markdown

Responsive Table

Each column in the table is assigned a display priority, when there is not enough room to display the entire table, one by one, a column will be removed, only displaying the most vital info.

A Pen by Dean Wagman on CodePen.

License.

script.js

/* Hey! We have Javascript installed! 
Let's us it! */
$('.drawer').hide();
$('.more').show();

/* Open and Close the drawer */
$('.drawer').prev('tr').on('click', function(){
  var tr = $(this);
  tr.toggleClass('shadow');
  tr.next('.drawer').toggle();
});

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Yellowtail);
@import url(http://weloveiconfonts.com/api/?family=entypo);


body{
  background: #00A388;
  font-family: 'Open Sans', sans-serif;
}
.container{
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}
h1{
  margin-top: 50px;
  font-size: 3em;
  border-bottom: 1px solid rgba(0,0,0,.3);
  font-family: 'Yellowtail', cursive;
  color: #eee;
  text-shadow: 0 0 10px rgba(0,0,0,.4);
}

/*Table*/
table{
  padding: 3px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: #eee;
  font-size: 1em;
  box-shadow: 0 0 15px 10px rgba(0,0,0,.3);
}
td,th{
  padding: 5px;
}
th{
  text-align: left;
  font-weight: bold;
  background: #BEEB9F;
}
tr:not(.drawer):hover{
  background-color: #ddd;
  transition: background-color 0.5s;
}

/*Utility*/
.shadow{
  border-bottom: 3px solid rgba(0,0,0,.1);
  opacity: .6;
  background-color: #ddd;
}
/*Background Money SVG*/
#money{
  position: absolute;
  top: 0;
  left: -150px;
  fill: #FFF;
  z-index: -10;
  opacity: 0.2;
}

/*Arrow Icons*/ 
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/*More Column*/
.more{
  text-align: center;
  display: none;
}

/************************
    Media Queries
************************/

/* Gradually remove columns */
@media (max-width: 800px){
  [data-priority="7"],
  [data-priority="6"]{
    display: none;
  }
  h1{font-size: 2.5em;}
}
@media (max-width: 600px){
  [data-priority="5"]{
    display: none;
  }
  h1{font-size: 2em;}
}
@media (max-width: 500px){
  [data-priority="4"]{
    display: none;
  }
  h1{font-size: 1.5em;}
}@media (max-width: 450px){
  [data-priority="1"]{
    display: none;
  }
}