Table auto responsive pure CSS3

Table auto responsive pure CSS3

by Adi Jaya

HTML

<h2>Resize splitter, See the difference</h2>
<h2>Responsive table on 600px</h2>

<table class="table tableautoresponsive">
    <tbody>
        <tr>
            <td data-title="false"><b>No.</b></td>
            <td data-title="false"><b>Name</b></td>
            <td data-title="false"><b>Age</b></td>
            <td data-title="false"><b>Gender</b></td>
            <td data-title="false"><b>Senior / junior</b></td>
        </tr>
        <tr>
            <td data-title="No.">1</td>
            <td data-title="Name">Adi</td>
            <td data-title="Age">32</td>
            <td data-title="Gender">man</td>
            <td data-title="Senior / Junior">junior</td>
        </tr>
        <tr>
            <td data-title="No.">2</td>
            <td data-title="Name">Jaya</td>
            <td data-title="Age">32</td>
            <td data-title="Gender">man</td>
            <td data-title="Senior / Junior">junior</td>
        </tr>
        <tr>
            <td data-title="No.">3</td>
            <td data-title="Name">Ida</td>
            <td data-title="Age">32</td>
            <td data-title="Gender">women</td>
            <td data-title="Senior / Junior">senior</td>
        </tr>
    </tbody>
</table>

<h2>CSS3:</h2>
<pre>
/* color code = Basic */
@media screen and (max-width: <code class='yellow'>600px</code>) {
  .tableautoresponsive <code class='cyan'>td:before</code> {
    content: <code class='yellow'>attr</code>(<code class='green'>data-title</code>);
    float: left;
    font-weight: bold;
    color: #3753a5;
  }
	
  .tableautoresponsive tr {
    margin-bottom: 10px;
    display: block;
  }

  .tableautoresponsive td {
    display: block;
    text-align: right;
    font-size: 13px;
  }	
  .tableautoresponsive <code class='yellow'>td</code>[<code class='cyan'><code class='green'>data-title</code>="false"</code>] {
    display: none!important;
  }
}  
</pre>

SCSS

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}

//media responsive
@media screen and (max-width: 600px) {
  .tableautoresponsive td:before {
      content: attr(data-title);
      float: left;
      font-weight: bold;
      color: #3753a5;
    }
	
    .tableautoresponsive tr {
      margin-bottom: 10px;
      display: block;
     }

    .tableautoresponsive td {
      display: block;
      text-align: right;
      font-size: 13px;
     }	
	  .tableautoresponsive td[data-title="false"] {
		  display: none!important;
	  }
}


table {
    border: none;
    border-collapse: collapse;
    empty-cells: show;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
	  margin-bottom :10px;
}

td,th {
    user-select: text;
    -o-user-select: text;
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
}


table th, table td {
    padding: 8px;
    vertical-align: middle;
	  border: 1px solid #dddddd;
}

pre {
    background: black;
    padding: 15px;
    color: #9a9a9a;
    overflow: auto;
}
.cyan {
  color : cyan;
}
.yellow {
  color : yellow;
}
.green {
    color: #7bf37b;
}