在 tbody 中添加滚动条时，标题对齐会受到干扰

Question

我已经为 header 和 body 定义了两个表。当表格大小超过 6 时，我想要正文的滚动条。但是当滚动条出现时，alignmnet 受到干扰，因为滚动条占用了 16px。其他列被调整大小。

<table id="myProjects" class="table table-hover table-bordered table-striped table-condensed table-scrollable">
      <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
      </thead>
    </table>
    <table id="myProjects" class="table table-hover table-bordered table-striped table-condensed table-scrollable">
      <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
      </tbody>
    </table>

have tried all these css classes, but its not working

#myProjects thead th:last-child {
    width: 161.133px; 
}
*
#myProjects tbody tr:last-child td {
    width: 145.133px; 
}
#myProjects{
    width:924.999px;
}

Answer 1

您不需要使用 2 个不同的表格，只需在 tbody 上设置滚动条即可。

tbody {
  display:block; /*so you can give it a height*/
  overflow-y:auto; /*to show scrollbar*/
  height:100px;
}
thead, tr {
   display:table; /*to restore the table behaviour*/
   table-layout:fixed; /*fix width of table, even columns width*/
   width:100%;
}

thead {white-space: nowrap;}

thead tr:after{
/*creates a "cell" at the end of the header to compensate for the scrollbar width*/
  content:""; width:17px; display:table-cell;
}

td, th{ border:1px solid;}
table{border-collapse:collapse; }
*, *::after{box-sizing:border-box;}

<table>
  <thead>
    <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td> <td>2</td> <td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td> <td>2</td> <td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td> <td>2</td> <td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td> <td>2</td> <td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td> <td>2</td> <td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td> <td>2</td> <td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td> <td>2</td> <td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td> <td>2</td> <td>3</td><td>4</td><td>5</td></tr>
  </tbody>
</table>