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

Question

如果您制作一个 100% 宽度的普通表格并为单元格设置一些边框，那么边框当然会围绕所有单元格的所有边缘。但是，如果您想要表格中的单元格是阴影的但边框是“清晰的”(与表格的包含元素相同的颜色)怎么办？在这种情况下，您可能希望边框出现在表格单元格的内边缘而不是外边缘。

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

如果您的表格使用绝对宽度，您可以处理这个问题，但如果您需要使用 % 宽度怎么办？

Answer 1

一种仅使用 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/