Question

我试图在响应式网站上实现基线/垂直节奏。表格单元格的顶部和底部边框给我带来了麻烦。我在这里有一个最小版本的问题：

如果将th / td上的边框设置为0，则从上到下遵循垂直网格，两列中的文本对齐。如果您将边框设置为0.0625em / 1px / anything并向下滚动到表格下方，您将看到列现在已经没有了。表格中的文字也不再尊重垂直网格。

问题是行高不考虑边框宽度。这两件事在确定td的高度时是相加的。理想情况下，我正在寻找像box-sizing: border-box这样的东西，但是对于行高+边界。

我可以通过明确指定th.bordered, td.bordered比line-height小一点p来解决这个问题，但听起来非常糟糕。我应该使用line-height以外的其他东西设置我的垂直节奏吗？ line-height和保证金的组合我然后将边距减少边界的宽度？我希望有更简单的东西！

Answer 1

  table {
    width: 100%;
    box-shadow: inset -1px -1px 0 0 #ccc;
  }
  td {
    padding-right: 1em;
    width: 50%;
    box-shadow: inset 1px 1px 0 0 #ccc;
  }

编辑 - 9月4日修复背景颜色。
您可以使用border作为元素，margin应该将元素移动到1px以下。因此桌面上的边框不会产生另一个线高问题。但这不能用于元素。

  table {
    width: 100%;
    margin-bottom: -1px;
    border: 0 1px 1px 0;
    border-style: solid;
    border-color: #ccc;
  }

线高和边界宽度之间的不良相互作用打破了垂直节奏 - 它们能够和解吗？

1 个答案: