HTML表格修改字段 HTML表格 – 更改列中单个单元格的宽度

有没有更优雅的解决方案来实现与此相同的效果？

我到目前为止的代码是这样的：

Table Test

table { border-collapse: collapse; }

td { border: solid 1px; }

td.nest { padding: 0px; }

td.nest table td { border-width: 0px 1px; }

td.nest table td:first-child { border-left: none; }

td.nest table td:last-child { border-right: none; }

123

到目前为止,我能够完成这项工作的唯一方法是在第一个中嵌入另一个表.我不喜欢它,因为理想情况下我只需要一个表,并且有很多额外的CSS来匹配第一个表的边框而不添加单元格(colspan =“3”)大小.我希望能够用普通的< tr>替换嵌套表.其中有三个< td> s.

我发现改变一个单元格宽度而不影响列中其他单元格的唯一方法是使用position：absolute;但是然后行中的下一个单元格被调整后的单元格的宽度向左移动,因此不能完全正常工作.宽度恰到好处也太难了.

那么,有没有办法只使用一个表获得相同的效果,没有额外的< div>等等,只是简单的CSS？该示例应该只有一个< table>,九< td> s并且没有colspan = s.我正在寻找一个纯CSS解决方案,如果存在.它应该能够处理任意宽度,只要它们加起来是原始宽度.