时间戳

首页 > 解决方案 > 当应用具有特定宽度和溢出的 div 包裹的表格时，td 宽度不适用

css - 当应用具有特定宽度和溢出的 div 包裹的表格时，td 宽度不适用

问题描述

使用下面的 html，我无法添加 td 元素的宽度

这里的表格用 div 包裹，它的宽度是 200px 并且给出了 overflow-x。

<div class="scroll" style="width: 200px; overflow-x: overlay;">

<table class="scrollable">
<tbody>
<tr>
    <td width="100" data-index="0" style="width: 118px;">-0.29%</td>
    <td data-index="1">-0.26%</td>
    <td data-index="2">-0.20%</td><td data-index="3">-0.15%</td>
    <td data-index="4">-0.09%</td><td data-index="5">0.19%</td>
    <td data-index="6">0.54%</td><td data-index="7">0.95%</td>
    <td data-index="8">1.33%</td><td data-index="9">1.67%</td>
    <td data-index="10">1.97%</td><td data-index="11">2.22%</td>
    <td data-index="12">2.44%</td><td data-index="13">2.62%</td>
    <td data-index="14">2.78%</td>
</tr>
</tbody>
</table>
</div>

标签： cssstylesheet

解决方案

尝试将显示属性更改<td>为display:inline-block。此外，您应该将其添加table { width: max-content; }到您的 CSS 中，以便您的表格可以容纳所有<td>现在它们更大的表格。

table {
  width: max-content;
}

td {
  width: 100px;
  display: inline-block;
}
<div class="scroll" style="
    width: 200px;
    overflow-x: auto;
">
  <table class="scrollable">
    <tbody>
      <tr>
        <td data-index="0">-0.29%</td>
        <td data-index="1">-0.26%</td>
        <td data-index="2">-0.20%</td>
        <td data-index="3">-0.15%</td>
        <td data-index="4">-0.09%</td>
        <td data-index="5">0.19%</td>
        <td data-index="6">0.54%</td>
        <td data-index="7">0.95%</td>
        <td data-index="8">1.33%</td>
        <td data-index="9">1.67%</td>
        <td data-index="10">1.97%</td>
        <td data-index="11">2.22%</td>
        <td data-index="12">2.44%</td>
        <td data-index="13">2.62%</td>
        <td data-index="14">2.78%</td>
      </tr>
    </tbody>
  </table>
</div>

推荐阅读