Question

我在bootstrap中很新，所以如果我的问题太简单，我很抱歉。

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

我试过这样做：

<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样式对分区的高度限制。并设置overflow属性以滚动。

Answer 4

tbody {
  height: 80px;
  display: block;
  overflow-y: auto;
}

tr {
  display: block;
}

td {
  width: 250px;
}

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

4 个答案: