如何在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>