Question

我正在尝试为我的表添加双边框我通过“表格的边界属性”获得第二个我正在使用: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>

Answer 1

您是否尝试使用包含表格的“div”？比使用“：before”和“：after”属性更容易。我不知道另一种解决方案。

Answer 2

似乎按照假设工作，我看到的唯一问题是边框几乎是透明的，它似乎是白色的背景，我给你一个小提琴来测试它：

http://jsfiddle.net/f5ow7mxg/

如果删除：

<Import Project="..\XYZ.UPlugin\XYZ.Plugin.projitems" Label="Shared" />

自：

border-color: rgba(255, 255, 255, 0.25);

边框按预期显示。

Answer 3

而不是样式表：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;
}

只需更改边框颜色，我只是将其设为黑色，让您看到它的工作原理。

here's the fiddle.

：之前和之后：不使用表格

3 个答案: