Question

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

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

我正在做这样的事情：

.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在这里做了什么吗？

Answer 1

:before和:after伪元素显示在他们正在修改的元素内。这意味着如果您将它们应用于表格，浏览器将尝试将其呈现为表格内不属于它的display: block内容。我怀疑不正确的宽度只是你正在使用的特定浏览器的工件，它试图做一些根本不应该做的事情。 [编辑：Alohci提供了解释，即浏览器正在以:after包裹table-cell内容table-row内容。这将导致内容显示为单列的宽度。]

如果您将代码应用于包裹<div>的{{1}}，您的代码可能会按预期工作吗？以这种方式添加<table>通常只是为了获得对表格布局的足够控制。

Answer 2

这是因为表不能在语义上包含其中的块级元素。使用:before和: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>

当然，.before和.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 - 它将在tbody中选择角落中的元素，即使tfoot将出现在下面）; b）你在表的开头有一个colgroup元素;或者c）你使用的rowpans会导致底部细胞实际上成为上面一行中细胞的一部分。

使用：before和：after标签与表

2 个答案: