Question

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

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

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

Answer 1

一种CSS方式，只使用should be available in 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/

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

1 个答案: