html table第一列固定
时间: 2023-07-08 07:47:03 浏览: 121
bootstrap table实现iview固定列的效果实例代码详解
要让 HTML 表格的第一列固定,可以使用 CSS 的 `position:fixed` 属性。
以下是一个简单的示例:
```html
<table>
<thead>
<tr>
<th>固定</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class="fixed">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="fixed">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
```
然后,在 CSS 中,使用以下代码:
```css
table {
table-layout: fixed;
width: 100%;
}
td.fixed {
position: sticky;
left: 0;
background-color: white;
}
```
这将使第一列在滚动时保持固定。
阅读全文