元素中,并設(shè)置表格的寬度為大于或等于容器的寬度。
下面是示例代碼:
<style>
.table-container{
width: 600px;
height: 400px;
overflow-y: scroll;
}
table{
width: 100%;
}
</style>
<div class="table-container">
<table>
<tr>
<th>標(biāo)題1</th>
<th>標(biāo)題2</th>
<th>標(biāo)題3</th>
</tr>
<tr>
<td>內(nèi)容1</td>
<td>內(nèi)容2</td>
<td>內(nèi)容3</td>
</tr>
<tr>
<td>內(nèi)容1</td>
<td>內(nèi)容2</td>
<td>內(nèi)容3</td>
</tr>
<tr>
<td>內(nèi)容1</td>
<td>內(nèi)容2</td>
<td>內(nèi)容3</td>
</tr>
<tr>
<td>內(nèi)容1</td>
<td>內(nèi)容2</td>
<td>內(nèi)容3</td>
</tr>
</table>
</div>
在上面的代碼中,我們首先設(shè)置了一個(gè)名為“table-container”的
元素,并給它設(shè)置了寬度和高度,并且將溢出部分進(jìn)行了滾動(dòng)處理。然后,我們將表格放入了這個(gè)
元素中,并將表格的寬度設(shè)置為100%,以充滿這個(gè)容器。
這樣,當(dāng)表格內(nèi)容過多時(shí),用戶可以通過滾動(dòng)條來查看表格的內(nèi)容,從而方便了用戶的使用。