table 的宽度是自适应的, 而且部分 TD 是固定宽度. 原则上应该讲 table 的宽度设置成一个固定的值, 而不应该设置成一个根据屏幕变化的值. 现在来看下如何设置表格 td 单元格的宽度.
例 1:Table 的宽度为 600px,Table 的 td 所有宽度总和不到 600px, 浏览器会自动按照 td 的宽度的比例算出宽度
- <table style="width: 600px;border-collapse: collapse;">
- <tr>
- <td style="width: 200px;"> 我是 200px</td>
- <td style="width: 200px;"> 我也是 200px</td>
- </tr>
- </table>
运行结果: 两个 td 都是 300px;
Table 的宽度为 600px, 前两个 td 的宽度已经为 600px, 那么第三个 td 的宽度没有指定, 这样的话第三个 td 的宽度是根据内容出现宽度的, 然后前两个再按照比列计算宽度.
例 2: 前两个 td 小于 table 宽度, 那么最后一个 td 就起到补全的作用
- <table style="width: 600px;border-collapse: collapse;">
- <tr>
- <td style="width: 300px;"> 我是 200px</td>
- <td style="width: 300px;"> 我也是 200px</td>
- <td > 我是根据内容的 </td>
- </tr>
- </table>
例 3:Table 中的 td 内, 如果放置块状元素超过 td 的宽度, 并且 table 的 table-layout: fixed;(fixed 表示 td 的宽度是定长的, 不随 td 内容变化而变化). 这样尽量不要再 td 里写 overflow: auto; 因为这样在 IE6,7 不会出现滚动条的, 最好的办法是套一个 div, 宽度设置成 100%
- <table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
- <tr>
- <td style="width: 200px;"><div style="width: 100%;overflow: auto;">
- <div style="width: 300px;height: 100px;background-color: red;">
- </div>
- </div>
- </td>
- <td > 我是自由宽度 </td>
- </tr>
- </table>
推荐: CSS 文档 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/14101.html