Html表格<；td>；-当表格宽度为100%时，如何滚动TD宽度？

我已经使用带有5列的

创建了一个表。我已将桌宽设置为100%。当我将表的

宽度设置为100%及以上时，水平滚动条不起作用

我已经提出了一个相关的问题。因为我没有得到这个问题的答案。我在这里再次提出。希望有人能帮我解决这个问题

我看到了很多关于以像素为单位的水平属性大小的问题，但在%上看不到任何东西。 非常感谢您的帮助

我想创造一些像图中所示的东西。

---

我用像素来创建它。但我需要让步

我粘贴的上一个问题： 链接：

Html:

表格{
宽度：100%；
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
}

第1栏
第2栏
第3栏
第4栏
第5栏

您应该尝试使用最小宽度，而不是仅使用宽度

<table>
    <tr>
        <td style="min-width: 25%">Column 1</td>
        <td style="min-width: 25%">Column 2</td>
        <td style="min-width: 25%">Column 3</td>
        <td style="min-width: 25%">Column 4</td>
        <td style="min-width: 25%">Column 5</td>
    </tr>
</table>

第1栏
第2栏
第3栏
第4栏
第5栏

或者，如果您试图获得滚动条，您可以增加表格宽度

table {
        width: 125%;
        border-collapse: collapse;
    }

    td {
        border: 1px solid black;
    }

<table>
    <tr>
        <td style="min-width: 25%">Column 1</td>
        <td style="min-width: 25%">Column 2</td>
        <td style="min-width: 25%">Column 3</td>
        <td style="min-width: 25%">Column 4</td>
        <td style="min-width: 25%">Column 5</td>
    </tr>
</table>

表格{
宽度：125%；
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
}
第1栏
第2栏
第3栏
第4栏
第5栏

使用CSS装置

vw

，参见文档：

vw=相对于视口宽度的1%^

^视口=浏览器窗口大小。如果视口宽度为50厘米，则1vw=0.5厘米

然后将您的

td

设置为最小宽度

25vw

 table td {
     min-width: 25vw;
     ...
 }

为了在表格上显示水平滚动条，您只能将其包装，然后应用溢出。。。 Html:

。表包装器{
溢出：自动；
}
桌子{
边界塌陷：塌陷；
}
表td{
最小宽度：25vw；
边框：1px纯黑；
}

第1栏
第2栏
第3栏
第4栏
第5栏

表格{
宽度：100%；
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
}

50=50
50 + 50 =100
50+50+30=130（此td 30%需要水平滚动条）

你到底想要什么？没有必要水平滚动，因为您的内容可以装入容器而不会溢出。。。您是否希望为每个单元格设置最小宽度，以便第5列不被“压缩”？另外，请注意，百分比是相对于直接父对象的。您不仅需要在某一点上使用固定的度量单位，而且每个祖先都需要一个百分比

宽度

，以便后代也能继承它。请参阅：尝试了您的解决方案，但冒号超出了表区域。并且该表的滚动条不会出现。您认为该表的滚动条是什么意思？请尝试以下操作：table{overflow-x:scroll；display:block；white space:nowrap；}td{min width:200px；}第1列第2列第3列第4列第5列我使用像素创建了它。但是我需要给出%。@MahalingaMSubramaniyaM所以使用

vw

单位，它基于视口的%。请看我的答案。我已经更新了此代码，因为它符合您的要求，很高兴它能正常工作。请读一读。

<div class="table-wrapper">
  <table>
  [...]
  </table>
</div>

.table-wrapper {
  overflow: auto;
}