Css 在表中使用：before和：after标记

我正在尝试使用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>

.minTable{
背景色：#3377AA；
}
.minTable:以前{
背景：透明url（“topright.png”）滚动，不重复右上角；
高度：13px；
显示：块；
边界：无；
内容：url（“topleft.png”）；
}
.minTable:之后{
显示：块；
线高：0.1；
字号：1px；
内容：url（“bottomleft.png”）；
利润率：0.0-1px0；
高度：13px；
背景：透明url（“bottomright.png”）滚动，不重复右下角；
填充：0；
}
...
一些文本
其他一些文本

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

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

---

有人能帮我理解

:before

和

:after

在这里做什么吗？

伪元素显示在他们正在修改的元素内部。这意味着，如果将它们应用于一个表，浏览器将尝试将其呈现为表中不属于它的

显示：block

内容。我怀疑不正确的宽度只是你正在使用的特定浏览器的产物，你试图做一些根本不应该做的事情。[编辑：Alohci解释说，浏览器正在以静默方式包装

：在
表格单元格中的
内容之后
由
表格行
包装。这将导致内容显示为单列的宽度。]

如果您将代码应用到包装
的
上，您的代码可能会按预期工作？以这种方式添加一个
通常是一个好主意，这样可以充分控制表的布局。
这是因为表在语义上不能包含块级元素。使用
：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>

如果以下情况，这些选择器将不起作用：a）您的表体元素顺序错误（例如thead、tfoot、tbody-它将在tbody中为角选择元素，即使tfoot将显示在下面）；b） 在表的开头有一个colgroup元素；或者c）使用行间距，这将导致底部单元格实际上是上一行单元格的一部分。
谢谢。我想这是有道理的。我假设在如何解释它们应用于的每个元素方面必须有一些智能（因此有明确的规则：before将如何应用于），但在这种情况下，它是未定义的？把桌子包起来本来是我的解决办法，但我希望能避免。这里的目标是尝试在CSS类中定义尽可能多的表样式。我试图尽可能多地抽象。我会让更了解CSS规范的人来决定
table:before
是否未定义。不管怎么说，没有非语义标记是一个梦想，即使使用最新的酷标准也无法实现。我开始问你，如果我在和之间插入标记和其他内容，我的示例是否会与你得到的类似，但听起来这正是我所做的=）@IanSchorr-我不认为table:before with display:block是未定义的，但它的实施情况如何则是另一回事。应该发生的是，伪元素将被包装在中，因此每个伪元素将在包含单个表单元的表行中结束，每个表单元显然将显示在第一个表列中。这与你在问题中描述的行为一致。啊哈，这是有道理的。我以为这里面有比现在更多的魔法，但这很清楚。谢谢你提供的关于另一种方法的提示。除了添加角点，我还需要做其他事情，但角点确实是我的主要挑战。这个解释并不完全准确。实际上，表前面/后面的块级别框确实属于它。但是由于特定于表格的CSS格式规则，这些框被至少两级匿名框包装——匿名
表格单元格
框包装在匿名
表格行
框中（如下面对答案的注释所述）。