如何在 Bootstrap 中创建具有固定高度和滚动的全宽表格?

Question

我对引导程序很陌生，所以如果我的问题太简单，我很抱歉。

我想创建一个以宽度作为父容器、固定高度和滚动条的表格，如果表格包含太多行。

我尝试过这样做：

<table class="table">
<tbody style="height: 80px; overflow-y: auto;">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</tbody>
</table>

它以全宽显示全表，但没有滚动，并且高度比我需要的要大。

我也尝试添加display: block;：

<table class="table">
<tbody style="height: 80px; display: block; overflow-y: auto;">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</tbody>
</table>

在这种情况下，滚动条出现了，但tr-tag的宽度不适合容器，它要短得多。

我还尝试指定width=100%tr和td标签，但没有运气。我应该如何解决我的任务？

Answer 1

像这样的事情，将你的表格包裹在div 中，然后为包装器而不是表格提供高度。

.table-wrap {
height: 80px;
overflow-y: auto;
}

<div class="table-wrap">
<table class="table">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</tbody>
</table>
</div>

Answer 2

tbody {
display:block; 
height:200px;
overflow-y:scroll;
}
tr {
display:block;
} 
th, td {
width:250px;
}

<table>
<thead>
<tr>
<td>R.No</td>
<td>Name</td>
<td>Mark1</td>
<td>Mark1</td>
<td>Mark1</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test1</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>2</td>
<td>test2</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>3</td>
<td>test3</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>4</td>
<td>test4</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>5</td>
<td>test5</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>6</td>
<td>test6</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>7</td>
<td>test7</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>8</td>
<td>test8</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>9</td>
<td>test9</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>10</td>
<td>test10</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
</tbody>
</table>

Answer 3

将表格包含在某个分区 (div( 中，然后通过 CSS 样式将宽度和高度限制应用于分区。并将溢出属性设置为滚动。

Answer 4

tbody {
height: 80px;
display: block;
overflow-y: auto;
}
tr {
display: block;
}
td {
width: 250px;
}