HTML/CSS 将表格宽度调整为列宽而不是相反的方式

Question

如何使列宽停止调整以适应表格宽度，因为以下代码在呈现时会将列拉伸(stretch)超过 50 像素:

<style>
   table {
      width:2000px;
   }

   td {
      width:50px;
   }
</style>

<table border="1">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>      
</table>

那么第二个问题是相反的，如果我没有为表格设置宽度并将每列设置为 200px 我如何构建比屏幕大的大表格。当我呈现下面的代码表宽度调整为页面宽度 (100%) 并且每列在表内具有相等的宽度而不是 200px

<style>
   td {
      width:200px;
   }
</style>

<table border="1">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>      
</table>

Answer 1

问题 1:像您在 Q2 中那样删除表格宽度将解决此问题。

问题 2:您需要检查您的容器，因为您的表格和列的大小将根据容器而不是屏幕调整。

例如:

body {
width:1000px;
}

或

container{width:1200px;}

这些或类似的东西中的任何一个都将包含您的表格并且不允许它的宽度继续。