html - 全屏宽度的表体

Question

我有一张 table 和一个div，例如一个盒子。我怎样才能让 thead 占据整个宽度到那个 div 然后让 tbody 占据整个屏幕宽度？这可能吗？

一个重要的方面是我不能使用固定值，因为表格必须是响应式的。

JS Fiddle

HTML:

<table>
  <thead>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>
<div class="box">
  box
</div>

CSS:

table, th, td {
  border: 1px solid black;
}
.box {
  width: 50px;
  height: 20px;
  background:blue;
  color: white;
  float:left;
}
table {
  float: left;
}

Answer 1

你可以通过创建另一个空的 th 作为最后一个来实现这一点，并在你的表行的每个最后 td 中添加 colspan="2".

更新:用容器 div .table-container 包装表格和 .box div，设置其 位置:具有 width:100% 的 relative，要扩展以填充其容器的表格，以便“使 tbody 占据整个屏幕宽度"并为 .box div 分配一个 position:absolute 以使用 top:0; 将其定位在右上角；右:0。还从表格和 .box

中删除了 float

JS Fiddle - updated

html, body {
  padding: 0;
  margin: 0;
}
.table-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
table {
  width: calc(100% - 2px);
}
/* no need for table rule here */
th, td {
  border: 1px solid black;
}
th {
  width: 100px;
}
th:last-child {
  border: none;  /* remove borders from last th */
}
.box {
  width: 50px;
  height: 20px;
  background: blue;
  color: white;
  position: absolute;
  top: 0;
  right: 1px;
}

<div class="table-container">
  <table>
    <thead>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th></th>
    </thead>
    <tbody>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td colspan="2">cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td colspan="2">cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td colspan="2">cell</td>
      </tr>
    </tbody>
  </table>
  <div class="box">
    box
  </div>
</div>