桌面全屏宽度

Question

我有一张桌子和一张local，例如一个方框。如何让div将全宽度调整到thead，然后让div获取整个屏幕宽度？这甚至可能吗？

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

JS Fiddle

HTML：

tbody

CSS：

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

Answer 1

您可以通过创建另一个空th作为最后一个来实现此目的，并在表格的每个td行添加colspan="2"。

更新：将表格和.box div包装为容器div .table-container，将position:relative设置为width:100%，表格可以扩展填充其容器以“使tbody获取整个屏幕宽度”并将position:absolute分配给.box div以将其定位在右上角有top:0; right:0。同时从表格和float

中删除了.box

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>