如何制作100％宽度和内部边框的HTML表格？

如果制作一个宽度为100％的普通表格，并为单元格设置一些边框，则边框当然会围绕所有单元格的所有边缘。但是如果你想要单元格被加阴影但边界是“清晰”的表格（与表格的包含元素相同的颜色）。在这种情况下，您可能希望边框出现在表格单元格的内边缘上，但不在外边缘上。如何制作100％宽度和内部边框的HTML表格？

如果左右两侧有空间，可以让表格的负边距等于单元格边框的宽度。这将使左侧齐平，但在100％宽度右侧不会完全到达右侧。如果你在这个设置中有3px边框，那么右边将是6px短。

如果您对表格使用绝对宽度，但是如果您需要使用宽度百分比，则可以处理此问题？

来源

2012-02-07 Moss

动态内容？使用javascript管理它。 – 2012-02-07 01:41:09

只让你的CSS只定义表格的内部边框？如果你想要IE8的兼容性，这是相当丑陋的CSS，但它可以完成。 – millimoose 2012-02-07 01:46:28

一个CSS的方式做一个表的只有内部边界使用CSS选择器是should be available in IE7：

table > tbody > tr > td { 
    border-left: medium solid orange; 
    border-top: medium solid orange; } 
    table > tbody > tr > td:first-child { 
    border-left: none; } 
table > tbody > tr:first-child > td { 
    border-top: none; } 

table { 
    border-spacing: 0; }

（的Sass靠不住的压痕提供）

强制性的jsfiddle链接：http://jsfiddle.net/inerdial/KzdUV/2/

来源

2012-02-07 02:04:25 millimoose

免责声明：这是假设选择器的重要性在IE中按预期工作。我没有真正测试它，因为没有跳过安装多个版本的IE所需的环境。也就是说，我已经在Windows XP IE用户使用的应用程序中使用过它，所以它可能有效。 – millimoose 2012-02-07 02:06:55

您可以使用开发人员工具将浏览器模式更改为旧版本。 – Moss 2012-02-11 20:07:40

如何制作100％宽度和内部边框的HTML表格？

回答

相关问题