css响应式表格滚动与横向滑动处理

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
        <th>职业</th>
        <th>薪资</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
        <td>工程师</td>
        <td>15000</td>
      </tr>
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 在 iOS 上启用平滑滑动 */
  margin-bottom: 1rem;
}
<p>.table-container table {
width: 100%;
border-collapse: collapse;
min-width: 600px; /<em> 防止表格被压缩得太小 </em>/
}</p><p>.table-container th,
.table-container td {
padding: 10px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}</p><p>.table-container th {
background-color: #f7f7f7;
font-weight: 600;
}

.table-container {
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
<p>/<em> 可选：右侧渐变遮罩 </em>/
.table-container::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8));
pointer-events: none;
z-index: 1;
}

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