如何使我的 table 超出页面限制而不适合页面

Question

这里我有一个 table 如下所示，我将每列的宽度设置得足够大以超过页数限制。我希望 table 超出页面并看到水平滚动条不适合页面，但它仍然只使用页面的 100% 宽度。不确定我做错了什么？感谢您的帮助！

代码在下面，这是codepenlink：https://codepen.io/bi-wu/pen/LYxYXKJ

<table>
  <tr>
    <td style="table-layout: fixed; width: 500px">Alfreds Futterkistea</td>
    <td style="width: 100px">Maria Anders</td>
    <td style="width: 5000px">Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
</table>

Answer 1

您可以使用 CSS table-layout: fixed; 和 min-width 属性，如下所示。

table {
  border-collapse: collapse;
  border: 1px solid black;
  table-layout: fixed;
}

th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td style="min-width: 500px">Alfreds Futterkistea</td>
    <td style="min-width: 100px">Maria Anders</td>
    <td style="min-width: 5000px">Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>

</table>

Answer 2

您需要了解 <td> 和 <tr> 是 <table> 的元素（或“子元素”），通常子元素不能超过尺寸（宽度 and/or height) 除非使用固定单位具有巨大的价值，比如 50,000 像素或其他东西。

我不建议这样做，因为它会破坏您的代码并且通常是错误的。我的意思是，想一想...里面包含另一个东西的东西怎么可能比它小？

您可以改为调整 table 的宽度。由于您希望 table 超出您的页面，因此您必须将宽度应用于 <table> 标记，而不是 <td> 和 <tr>。当您这样做时，它会自动将这些宽度应用于 td 和 tr，您将获得水平滚动条。

我的意思是：- https://i.imgur.com/HLNPPOM.png

编辑：- 我使用相对单位vw来设置table的宽度，也就是说table的宽度现在是总宽度的200%您正在查看它的屏幕。如果你不知道相对单位，我建议你了解一下。

如何使我的 table 超出页面限制而不适合页面

How to make my table exceed the page limit without fitting to page

html

css

html-table