<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
<h1>Table Style</h1>
  <h2>Css only</h2>

<section>
<table>
  <thead>
    <tr>
      <th>Big heading</th>
      <th>Big heading</th>
      <th>Big heading</th>
      <th>Big heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Title</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th>Title</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
   </tbody>
</table>
<h3>↓</h3>
<table class="sp">
  <thead>
    <tr>
      <th>Big heading1</th>
      <th>Big heading2</th>
      <th>Big heading3</th>
      <th>Big heading4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Title</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th>Title</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
   </tbody>
</table>
</section>
body{
  font-family: 'Comfortaa', cursive;
}

h1 {
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
  font-size:40px;
  margin-top: 80px;
}

h2{
  text-align:center;
  font-size:25px;
  font-weight: 100;
  margin-top: 20px;
}

h3{
  text-align:center;
  margin-top: 30px;
  font-size: 30px;
}

section{
  width: 500px;
  margin:50px auto;
  p{
    font-size:20px;
    font-weight: bold;
    margin-bottom: 15px;
  }
}

table{
  width:100%;
  margin: auto;
  tr{
    width: 100%;
  }
  th,td{
    box-sizing:border-box;
    padding: 15px;
  }
  thead{
    th{
      background: #000;
      color: #fff;
      text-align: left;
    }
  }

  tbody{
    text-align: left;
    th{
      background: #eee;
    }
  }
}

.sp{
  width: 420px;
  margin-top: 40px;
  tr{
      display: block;
      width: 100%;
    }
     thead{
      display: none;
    }
    tbody{
    display: block;
    width: 100%;
    overflow: hidden;
      th{
        list-style:none;
      }
      td{
        margin-left: 40px;
      }
      th,td{
        width: 100%;
        display: list-item;
      }
    }
}

@media only screen and (max-width:420px){
  body{
    width: 100%;
  }
  section{
    box-sizing:border-box;
    width: 100%;
    padding: 0px 20px;
  }
  table{
    tr{
      display: block;
      width: 100%;
    }
     thead{
      display: none;
    }
    tbody{
    display: block;
    width: 100%;
    overflow: hidden;
      th{
        list-style:none;
      }
      td{
        margin-left: 40px;
      }
      th,td{
        width: 100%;
        display: list-item;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.