：之前和之后：不使用表格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了：之前和之后：不使用表格相关的知识，希望对你有一定的参考价值。
我正在尝试添加双边框到我的桌子我得到一个“表的边界属性”第二我使用:before和:after但它不工作。我是CSS和html的新手，并尝试我的水平最好找出解决方案，但失败了。任何帮助都会有帮助。
<!DOCTYPE html>
<html>
<head>
<style>
#banner table:before {
content: '';
display: block;
border-top: solid 1px;
border-color: #888;
border-color: rgba(255, 255, 255, 0.25);
margin: 10px 0 1.25em 0;
}
#banner table:after {
content: '';
display: block;
border-bottom: solid 1px;
border-color: #888;
border-color: rgba(255, 255, 255, 0.25);
margin: 1.25em 0 10px 0;
}
</style>
</head>
<body>
<div id="banner">
<div id=myTable> <table>
<tbody>
<tr>
<td class="hjsb"><label for="what">What are you looking for</label></td>
<td class="hjsb" colspan="2"><label for="where">Location</label></td>
</tr>
<tr>
<td class=""><span class="inwrap"><input class="input_text" maxlength="512" size="31" name="q" autocomplete="off" id="what"></span><div style="width:250px"><!-- --></div></td>
<td class=""><span class="inwrap"><input class="input_text" maxlength="64" size="27" name="l" autocomplete="off" id="where" value="Location"></td>
<td class="" style="width:1px"><input type="submit" class="input_submit" value="Search Jobs"></td> </tr> <tr>
<td class="" colspan="3"><label for="what">Advanced Job Search</label></td>
</tr> </tbody>
</table>
</div>
</div>
</body>
</html>
答案
似乎按照假设工作，我看到的唯一问题是边框几乎是透明的，它似乎是白色的背景，我给你一个小提琴来测试它：
如果你删除：
border-color: rgba(255, 255, 255, 0.25);
从：
#banner table:before {}
#banner table:after {}
边框按预期显示。
另一答案
而不是样式表：before和table：after，为什么不使用#myTable：before和#myTable：after，像这样：
#banner #myTable:before {
content: '';
display: block;
border-bottom: solid 1px black;
margin: 10px 0 1.25em 0;
}
#banner #myTable:after {
content: '';
display: block;
border-bottom: solid 1px black;
margin: 1.25em 0 10px 0;
}
只需更改边框颜色，我只是将其设为黑色，让您看到它的工作原理。
另一答案
您是否尝试使用包含表格的“div”？比使用“：before”和“：after”属性更容易。我不知道另一个解决方案。
以上是关于：之前和之后：不使用表格的主要内容，如果未能解决你的问题，请参考以下文章