Html 如何使我的表格在不适合页面的情况下超过页面限制

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

代码如下，这是代码笔链接：

阿尔弗雷德·福特基斯茶
玛丽亚·安德斯
德国
岛屿贸易
海伦·贝内特
英国

您可以使用CSS

表格布局：固定和
最小宽度
属性如下所示


表格{
边界塌陷：塌陷；
边框：1px纯黑；
表布局：固定；
}
th，
运输署{
边框：1px纯黑；
}

阿尔弗雷德·福特基斯茶
玛丽亚·安德斯
德国
岛屿贸易
海伦·贝内特
英国
您可以使用CSS
表格布局：固定和
最小宽度
属性如下所示


表格{
边界塌陷：塌陷；
边框：1px纯黑；
表布局：固定；
}
th，
运输署{
边框：1px纯黑；
}

阿尔弗雷德·福特基斯茶
玛丽亚·安德斯
德国
岛屿贸易
海伦·贝内特
英国
您需要了解，
和
是
的元素（或“子元素”），通常，子元素不能超过其父元素的尺寸（宽度和/或高度），除非固定单位与大值一起使用，例如50000像素或其他

我不建议这样做，因为它会破坏您的代码，而且通常是错误的。我是说，想想看。。。一个包含着另一个东西的东西怎么可能比它小呢

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

我的意思是：-

编辑：-我使用了相对单位
vw
来设置表格的宽度，这意味着表格的宽度现在是您正在查看的屏幕总宽度的200%。如果你不知道相对单位，我建议你去了解它。
你需要了解
和
是
的元素（或“子元素”），通常，子元素不能超过其父元素的尺寸（宽度和/或高度），除非固定单位使用了巨大的值，比如说50000像素之类的

我不建议这样做，因为它会破坏您的代码，而且通常是错误的。我是说，想想看。。。一个包含着另一个东西的东西怎么可能比它小呢

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

我的意思是：-

编辑：-我使用了相对单位
vw
来设置表格的宽度，这意味着表格的宽度现在是您正在查看的屏幕总宽度的200%。如果你不知道相对单位，我建议你去了解一下。
谢谢，我试过了，效果不错。我发现，即使我将单元格宽度减小，表格也会超出页面并显示水平条，只有当宽度超过页面时，它才可能显示滚动条？是的，您可以通过设置
min width属性，这就是nadz在上面所做的。谢谢，我试过了，效果很好。我发现，即使我将单元格宽度减小，表格也会超出页面并显示水平条，只有当宽度超过页面时，它才可能显示滚动条？是的，您可以通过设置
min width属性，这就是nadz在上面所做的。这很有效！谢谢你，娜兹！伟大的没问题。请将问题标记为已回答，然后关闭它。：）真管用！谢谢你，娜兹！伟大的没问题。请将问题标记为已回答，然后关闭它。：）
<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>