2

我正在尝试将 CSS:before和:after标签与 HTML 表格一起使用来生成某种自动页眉和页脚，以进行样式设置。它们只是装饰性的，但我希望能够将这些东西定义为一般表格样式的一部分。

现在我正在使用简单的圆形边框（使用图像）进行测试，试图将特定图像放置在元素的右侧和左侧，但我想将相同的技术用于许多其他样式。

我正在做这样的事情：

.minTable {
    background-color: #3377AA;
}


.minTable:before {
    background: transparent url("topright.png") scroll no-repeat top right;
    height: 13px;
    display: block;
    border: none;
    content: url("topleft.png");
}

.minTable:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url("bottomleft.png");
  margin: 0 0 -1px 0;
  height: 13px;
  background: transparent url("bottomright.png") scroll no-repeat bottom right ;
  padding: 0;
}

...

<table class="minTable" width="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>Some text</td>
    <td>Some other text</td>
  </tr>
</table>

这大致显示了我想要的方式，除了元素的宽度似乎与第一个单元格（列）的大小匹配，而不是表格的宽度。所以我的“右侧”图像显示在第一个表格列的右侧。

这可能是完成我想要做的事情的一种非常愚蠢的方式，但我很困惑为什么 :before 和 :after 似乎只与第一列而不是整个表对齐。

任何人都可以帮助我了解:before和:after在这里做什么？

4

2 回答 2

3

:before和:after伪元素显示在它们正在修改的元素内。这意味着如果您将它们应用于表格，浏览器将尝试将您的display: block内容呈现在不属于它的表格中。我怀疑不正确的宽度只是您正在使用的特定浏览器试图做一些它根本不应该做的事情的产物。[编辑：Alohci 解释说浏览器默默地将:after内容包装在一个table-cell由table-row. 这将导致内容看起来是单列的宽度。]

如果您将代码应用于<div>包装<table>? 以这种方式添加一个<div>通常是一个好主意，只是为了获得对表格布局的足够控制。

于 2013-09-03T22:13:58.187 回答
1

发生这种情况是因为表在语义上不能在其中包含块级元素。使用:beforeand伪元素在:after该父元素之前和之后添加该内容。为了更易于理解，以下是您的最终结果在技术上最终的样子：

<table class="minTable" width="800" border="0" cellpadding="0" cellspacing="0">
  <div class="before">
    <img src="topleft.png" />
  </div>
  <tr>
    <td>Some text</td>
    <td>Some other text</td>
  </tr>
  <div class="after">
    <img src="topleft.png" />
  </div>
</table>

当然，.beforeand.after也会继承它们尊重的伪元素相关样式。但是，您可以想象这样的表内的块级元素将无法正常运行，因为块级元素不属于表内。

一般来说，我什至会避免尝试使用:before和:after与表一起使用——那只是要求一团糟。

如果您只是想添加角，我会使用 CSS 来选择每个角单元格。像这样的东西：

.minTable > :first-child > tr:first-child > td:first-child /* Top-left corner */
.minTable > :first-child > tr:first-child > td:last-child /* Top-right corner */
.minTable > :last-child > tr:last-child > td:first-child /* Bottom-left corner */
.minTable > :last-child > tr:last-child > td:last-child /* Bottom-right corner */

如果出现以下情况，这些选择器将不起作用： a) 您的表格主体元素无序（例如，thead，然后 tfoot，然后 tbody - 即使 tfoot 将出现在下方，它也会选择 tbody 中的元素作为角点）；b）您的表格开头有一个 colgroup 元素；或 c）您使用行跨度，这将导致底部单元格实际上是上面行中单元格的一部分。

于 2013-09-03T22:14:25.493 回答