responsive2

by JM note

HTML

<style>
.table1 {
  border-collapse: collapse;
  min-width: 200px;
}
.table1 th, .table1 td {
    padding: 10px;
    border: 1px solid #ddd;
}
@media (max-width: 760px) {
  .table1 thead { 
		display: none;
	}
  .table1, .table1 tbody, .table1 tr, .table1 th, .table1 td {
    display: block;
	}
  .table1 td {
    position: relative;
    padding-left: 50%; 
  }
  .table1 td:before {
		position: absolute;
		top: 24%;
    right: 65%;
    font-weight: bold;
	}
  .table1 td:nth-of-type(1):before { content: "column1"; }
  .table1 td:nth-of-type(2):before { content: "column2"; }
  .table1 td:nth-of-type(3):before { content: "column3"; }
  .table1 td:nth-of-type(4):before { content: "column4"; }
  .table1 td:nth-of-type(5):before { content: "column5"; }
  .table1 td:nth-of-type(6):before { content: "column6"; }
  .table1 td:nth-of-type(7):before { content: "column7"; }
  .table1 td:nth-of-type(8):before { content: "column8"; }
}
</style>
<table class="table1">
<thead>
  <tr><th>#</th><th>column1</th><th>column2</th><th>column3</th><th>column4</th><th>column5</th><th>column6</th><th>column7</th><th>column8</th></tr>
</thead>
<tbody>
  <tr><th>row1</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
  <tr><th>row2</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
  <tr><th>row3</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
</tbody>
</table>