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

Question

如果你制作一个100％宽度的普通表并给单元格一些边框，边框当然会围绕所有单元格的所有边缘。 但是，如果您希望表格中的单元格被着色但边框是“清晰”（与表格的包含元素颜色相同），那该怎么办呢？ 在这种情况下，您可能希望边框显示在表格单元格的内部边缘上，而不是外边缘上。

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

如果您使用表的绝对宽度，则可以处理此问题，但如果需要使用％宽度，该怎么办？

Answer 1

一种CSS方法，只使用应该在IE7中可用的 CSS选择器的表的内部边框：

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/