如何在 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 标签没有运气。我应该如何解决我的任务？

原文由 Fomalhaut 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

像这样，将表格包装在一个 div 中，然后将高度赋予 wrapper 而不是表格。

 .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>

原文由 Abhishek Pandey 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 Tamilarasan N 发布，翻译遵循 CC BY-SA 4.0 许可协议