CSS表格宽度怎么调整_CSS表格宽度调整技巧分享

老实说，当我第一次开始研究 CSS 表格时，我对它们感到困惑。
不过你总结的挺全面的。
我根据我踩过的坑补充几句。
可能有点啰嗦，但我会尽量说实话。

我们先来说说适配。
我在做一个活动页面的时候，表格的内容突然变得太大，有时又太小，所以我直接使用了width:auto+table-layout:auto。
结果我发现手机上的列宽乱七八糟，乱七八糟。
后来改用了min-width+max-width，比如设置min-width:2 00px，max-width:1 00%，这样小屏幕至少能看到完整的内容，大屏幕也不会卡住容器。
但这种方法有一个缺陷，就是无法对中间状态进行微调。
例如，在某个分辨率下它看起来恰到好处，但如果稍微上升或下降，就会看起来很奇怪。

我经常使用固定列宽。
以前制作订单表时，amount 列必须固定为 1 5 0px，其他列均以 1 fr 等分。
关键是要记住属性table-layout:fixed。
如果没有这个，固定列宽可能会失败。
有趣的是，当我在项目中使用这个方法时，我发现IE Edge有一个bug。
固定的列宽偶尔会跳动。
最后我改成了 max-width+auto 组合才算正确。
这个细节现在想起来都觉得很离谱。

我遇到过3 次百分比宽度无效的问题，每次的原因都不一样。
有一次，父容器没有设置宽度，直接导致表格乱了； 另一次，表格布局：修复混乱，忽略百分比； 还有一次，内容太长，单元格炸裂，最后用word-break:break-all强制换行。
您对故障排除顺序的看法是正确的。
首先查看父容器，然后查看表布局，然后检查内容溢出和选择器优先级。
我有一个客户使用Chrome，百分比宽度正常，但是Firefox有问题。
最后检查后发现浏览器前缀没有添加完整。

现在在做响应式布局时，我喜欢使用最小宽度+最大宽度+百分比混合解决方案。
例如，表头固定为2 00px，其他列占7 0%/3 0%，表本身max-width:1 00%跟随容器。
这样在手机上内容较多时表格可以自动缩小，但在电脑上就不会太窄了。
我有一个金融APP就是用这个布局制作的，效果确实不错。

说到底，调整桌子宽度就像拌水煮面。
火候一定要控制好。
width、table-layout、min-width、max-width 属性使用过多会互相影响。
你必须像老中医把脉一样，一一试。
我建议新手先从width:auto+table-layout:auto开始练习，然后逐渐混入min-width、max-width等“香料”，最终做出一个韵味十足的表格布局。

table中如何用CSS控制<tr>><td>的宽度和高度

表格布局固定，宽度设置为5 00px，td宽度根据内容自动调整。

项目：公司内部汇报系统 时间：2 02 0年6 月 Number: 5 00px
直接设置td宽度是无效的。
使用CSS框大小来解决。

项目：客户订单管理界面 时间：2 01 9 年8 月 经验：盒子尺寸：border-box；让 td 包括填充和边缘。

我仍在验证它，有时我必须调整字体大小进行微调。

项目：在线交易平台产品列表 时间：2 02 1 年4 月 不确定，但这是我的经验。

自己掂量一下。

CSS表格宽度控制疑难：TD宽度设置失效问题排查与解决方案

哎呀，让我告诉你，当谈到桌子的TD宽度时，我遇到了很多陷阱。
记得有一年做一个大项目，表格完成了一半，但是宽度不对。
清理后，桌子顶部的TD比底部宽，整体布局混乱。
想一想，如果你把表头的TH宽度设得大，而想把它下面的TD宽度设小，那就听不到了，会直接对应TH。
特别是表格布局功能，自动默认。
它根据内容盲目地调整自己。
他不会听你描述他的广度。
那时我已经经常改变事情了，我的头也越来越大了。

后来我意识到，这里有一些技巧，你可以尝试一下：
1 首先，统一标头的 TD 和 TH 宽度。
使用如下内联样式：
标题
或者，向整个标题添加一个部分并将其设置为一致。
CSS .table-produtos_vendidos th { 宽度：3 00像素； }
这样标题和单元格宽度将相同，并且不会有参数。
2 .另一个技巧，准备调整桌子位置。
这个东西可以工作，但它应该以宽度、1 00% 或固定像素使用。
像这样： CSS .table-produtos_vendidos { 工作台位置：固定； 宽度：1 00%； }
请记住，该常量使表列宽保持不变。
无论内容有多少，列的宽度都不会改变。
这取决于您使用时的情况。
有时候内容很多，这样的设置会导致列的宽度拉伸，不太美观。
3 、还有内容超载的问题。
如果单元格的内容太大而宽度不够，它就会膨胀。
那时我有一个表格。
内容太长，整个形式被破坏了。
后来我添加了一些CSS： CSS 产品{ 空白：nowrap； 丰富的：隐藏的； 文本剩余：省略号； 最大宽度：3 00px； }
这样，如果内容很多，就会出现省略号，表格也不会展开。
但要小心，这应该与最大宽度结合使用，否则椭圆可能不完全可见。
4 . 最后，不要忘记边框和面板。
有时单元格有边框或者有边框，但是宽度不对。
您应该考虑这些事情，例如： CSS .table-produtos_vendidos td { 内边距：5 px； 边框：1 px实心CC； 最小宽度：2 00像素； 最大宽度：3 00像素 }
这样就可以控制宽度了。

我告诉你，做表格的时候，真的要小心。
您可以尝试这些方法，它们应该能够解决您的TD幅度故障问题。
如果不起作用，请尝试不同的组合，您总会找到正确的组合。