Question

如何使列宽停止调整为表格宽度，因为下面的代码会在渲染时将列拉伸超过50px：

<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;
}

OR

container{width:1200px;}

其中任何一个或类似的东西都会包含你的表格而不允许它的宽度继续。

Answer 2

display: inline-block;会解决它

td {
    width:50px;
    display: inline-block;
    /* if you want to write text in the cells longer than 50px, use also the followings */
    overflow: hidden;
    white-space: nowrap;
}

table-layout: fixed;会解决它

table {
    table-layout: fixed;
    width: 1px; /* required for table-layout */
}

td {     
    width:200px;
}

HTML / CSS将表宽度调整为列宽，而不是相反

2 个答案: