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

Question

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

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

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

Answer 1

一种仅使用 CSS 选择器的表格内部边框的 CSS 方法，应该在 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/