Question

我正在尝试在我的WP网站上显示一个表格，我只是在学习CSS，但是当我创建我认为应该是正确的时候并不是正确的。只显示右外边框，左边框和上边框。

.front {
    border: 2px solid red;
}

我把它放在表类中。我也尝试添加另一个底边，即使它本身也没有。这是我的表格代码，非常简单。只是想学习使用CSS。

<table class="front">
<tbody>
<tr>
<td>test.</td>
<td>test.</td>
</tr>
<tr>
<td colspan="2">test.</td>
</tr>
</tbody>
</table>

我在这里搜索并尝试了这个，但是没有用（我在这里找到了其他的东西，但是我记得这个）：

table {
    border-collapse: separate;
}

我应该注意，我使用CSS插件使我更容易将其添加到CSS。没有使用它，一个简单的隐藏工作正常。不确定这是否与它有关，只是一些可能有用的额外信息。

Answer 1

问题可能是表格的height或放置的容器。

查看this fiddle并尝试将表格的高度设置为100％，如下所示：

.front {
    border: 2px solid red;
    height: 100%;
}

Answer 2

相应地应用以下CSS;这将解决您的问题：

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

问题是“box-size”为“100％”，因此边框会被进一步推动。如果您将上述CSS属性应用于此类元素，则不必面对此类问题。

编辑：

这将适用于跨越另一个内部的整个宽度（或全高）的元素因此，它可以像“宽度”或“高度”一样工作，但这两者都是：

CSS：

.spanBox
{
    width:100%;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.redBorder
{
    border: 2px solid red;
}

HTML：

<table class="spanBox redBorder"><tr><td>...</td></tr></table>

表的底部边框不会显示

2 个答案:

编辑：