当 table 用具有特定宽度的 div 包裹并应用溢出时，td 宽度不适用

Question

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

这里table用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>

Answer 1

尝试将 <td> 的显示属性更改为 display:inline-block。此外，您应该将此 table { width: max-content; } 添加到您的 CSS，这样您的 table 就可以容纳所有 <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>

当 table 用具有特定宽度的 div 包裹并应用溢出时，td 宽度不适用

td width not apply when table wrapped with div with specific width and overflow is applied

css

stylesheet