水平滚动后块元素消失

Question

我有类似于这种情况的代码:

table {
  table-layout: auto;
  background-color: tomato;
  border: 1 solid black;
}

.table-wrapper {
  display: inline-block;
}

.tabs {
  background-color: #00bcd4;
}

<div>
  <div class="tabs">
    smth
  </div>
  <div class="table-wrapper">
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Sample</th>
        <th>Sample</th>
        <th>Sample</th>
      </tr>
      <tr>
        <td>Jill31222222</td>
        <td>Smith12333333333333</td>
        <td>5031231231231232</td>
        <td>Jill31231231231</td>
        <td>Smith312312312312</td>
        <td>50312312312312312</td>
      </tr>
      <tr>
        <td>Eve12312312312</td>
        <td>Jackson1233123123123123312</td>
        <td>94312312312312</td>
        <td>Jill312312312312</td>
        <td>Smith312312312</td>
        <td>5031233123123123</td>
      </tr>
    </table>
  </div>
</div>

我有一个使用了样式table-layot: auto的表格，其中单元格显示非常大的文本。表格上方显示选项卡。水平滚动后，tabs div被截断了。是否有可能根据表格的宽度来拉伸tabs div呢？

相关图像：

- Dasshield

---

你的意思是说，标记为“smth”的div只有body那么宽？ - Mr Lister

使用table responsive。 - Miquel Al. Vicens

@MrLister 是的，它的宽度对应于水平滚动条初始状态的宽度。 - Dasshield

Answer 1

一个 div（或任何具有 display:block 属性的元素）的宽度仅取决于其容器。
因此，一种解决方法是将其放入与表格同样宽的容器中。比如说，使用一个围绕着表格的 inline-block，它会自动拉伸至正确的宽度。

.div-and-table-wrapper {
  display:inline-block;
  min-width:100%;
}

table {
  table-layout: auto;
  background-color: tomato;
  border: 1 solid black;
}

.table-wrapper {
  display: inline-block;
}

.tabs {
  background-color: #00bcd4;
}

<div class="div-and-table-wrapper">
  <div class="tabs">
    smth
  </div>
  <div class="table-wrapper">
    <table>
      <tr>
        <th>Firstname</th>

        <th>Lastname</th>
        <th>Age</th>
        <th>Sample</th>
        <th>Sample</th>
        <th>Sample</th>
      </tr>
      <tr>
        <td>Jill31222222</td>
        <td>Smith12333333333333</td>
        <td>5031231231231232</td>
        <td>Jill31231231231</td>
        <td>Smith312312312312</td>
        <td>50312312312312312</td>
      </tr>
      <tr>
        <td>Eve12312312312</td>
        <td>Jackson1233123123123123312</td>
        <td>94312312312312</td>
        <td>Jill312312312312</td>
        <td>Smith312312312</td>
        <td>5031233123123123</td>
      </tr>
    </table>
  </div>
</div>

（注意：min-width用于确保标签div的宽度至少与窗口一样宽，以防表格更窄。
如果您不想这样做，即如果您希望标签div始终与表格具有相同的宽度，则最好将其变成caption。）

- Mr Lister

Answer 2

你需要将父级的 div 宽度设置为 fit-content:

table {
  table-layout: auto;
  background-color: tomato;
  border: 1 solid black;
}

.table-wrapper {
  display: inline-block;
}

.tabs {
  background-color: #00bcd4;
}

.tabs-wrapper {
  width: fit-content;
}

<div class="tabs-wrapper">
  <div class="tabs">
    smth
  </div>
  <div class="table-wrapper">
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Sample</th>
        <th>Sample</th>
        <th>Sample</th>
      </tr>
      <tr>
        <td>Jill31222222</td>
        <td>Smith12333333333333</td>
        <td>5031231231231232</td>
        <td>Jill31231231231</td>
        <td>Smith312312312312</td>
        <td>50312312312312312</td>
      </tr>
      <tr>
        <td>Eve12312312312</td>
        <td>Jackson1233123123123123312</td>
        <td>94312312312312</td>
        <td>Jill312312312312</td>
        <td>Smith312312312</td>
        <td>5031233123123123</td>
      </tr>
    </table>
  </div>
</div>

一个替代方案是，正如Lister先生已经建议的那样，使用inline-block而不是fit-content。

- Markus Schwer