HTML中的table標簽是經常被使用的標簽，而且它的屬性也非常豐富。但是在使用過程中，我們往往會遇到一個問題：當表格內容很大時，滾動條跟著移動，表頭和左側固定不動如何實現呢？下面我們看一下如何使用HTML和CSS實現固定表頭和左側欄的問題。

<table class="fixed">
<thead>
<tr>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
</tr>
</thead>
<tbody>
<tr>
<td>內容1</td>
<td>內容2</td>
<td>內容3</td>
</tr>
</tbody>
</table>

以上是我們的table標簽的基本結構，首先我們需要為它添加一個class="fixed"的屬性。然后我們還需要添加一些CSS樣式來實現固定表頭和左側欄的效果。

.fixed {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.fixed thead {
overflow-y: scroll;
height: 35px;
}
.fixed tbody {
overflow-x: scroll;
overflow-y: scroll;
height: 200px;
width: 100%;
}
.fixed th,
.fixed td {
padding: 5px 10px;
text-align: left;
border: 1px solid #ccc;
}
.fixed th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
background: #eee;
}
.fixed td:first-child,
.fixed th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ddd;
}

以上是我們的CSS樣式，我們以.fixed作為選擇器，給table、thead、tbody、th和td添加了一些基本樣式。對于表頭和左側欄的樣式，我們使用position屬性和z-index屬性來實現，其中position屬性有兩個值：-webkit-sticky和sticky，它們的作用是固定元素，當滾動超過元素底部的時候元素會變?yōu)閒ixed狀態(tài)懸停在瀏覽器窗口的某個位置，最后我們再使用背景色來美化我們的表格。

綜上所述，通過以上的HTML和CSS代碼，就可以實現固定表頭和左側欄的效果了。當然，如果表格內容較多的話，不添加滾動條是不行的，但是通過這種方法設計的滾動條只針對表格內容，不會占用窗口的滾動條，給用戶提供了更好的使用體驗。