css初级项目中实现响应式表格样式

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
        <th>职业</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
        <td>设计师</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>32</td>
        <td>上海</td>
        <td>工程师</td>
      </tr>
    </tbody>
  </table>
</div>

.table-container {
  overflow-x: auto;
  width: 100%;
}
<p>table {
width: 100%;
border-collapse: collapse;
min-width: 400px; /<em> 防止缩得太小 </em>/
}</p><p>th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}</p><p>th {
background-color: #f5f5f5;
}</p>

@media (max-width: 600px) {
  .table-container table,
  .table-container thead,
  .table-container tbody,
  .table-container th,
  .table-container td,
  .table-container tr {
    display: block;
  }
<p>thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}</p><p>tr { border: 1px solid #ccc; margin-bottom: 10px; }</p><p>td {
border: none;
position: relative;
padding-left: 50%;
text-align: left;
}</p><p>td:before {
content: attr(data-label);
position: absolute;
left: 10px;
width: 45%;
font-weight: bold;
}
}</p>

<tr>
  <td data-label="姓名">张三</td>
  <td data-label="年龄">28</td>
  <td data-label="城市">北京</td>
  <td data-label="职业">设计师</td>
</tr>