如何使用 CSS 设置 < table > border width？

小开

<table style='border:1px solid black'>
<tr>
<td>Derp</td>
</tr>
</table>

这个应该可以，我用的是边界的简写语法。

小开

<table style="border: 5px solid black">

这只会在表的周围添加一个边框。

如果你想通过 CSS 得到相同的边框，那么添加以下规则:

table tr td { border: 5px solid black; }

和一件事为 HTML 表避免空格

<table cellspacing="0" cellpadding="0">

小开

像这样:

border: 1px solid black;

为什么它不起作用? 因为:

始终在边框宽度之前声明边框样式(在我的示例中为实线)属性元素必须有边框才能更改颜色。

小开

你需要像这样添加边框样式:

<table style="border:1px solid black">

或者像这样:

<table style="border-width:1px;border-color:black;border-style:solid;">

小开

最佳答案

使用 css 对表进行边框处理有点复杂(但是没有那么复杂，参见这个 jsfiddle 作为例子) :

table {
border-collapse: collapse;
border: 1px solid black;
}


table td {
border: 1px solid black;
}

<table>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>

小开

默认的 border-style是 none，因此您必须指定它以及宽度和颜色。

您可以使用 border速记属性一次性设置所有三个值。

此外，orders 属性描述了表还有的单元格边框。CSS 更加灵活，因此它只描述您正在选择的元素的边界。为了得到同样的效果，你也需要选择单元格。

table, th, td {
border: solid black 1px;
}

小开

它不起作用的原因是，尽管设置了 border-width和 border-color，你没有指定 border-style:

<table style="border-width:1px;border-color:black;border-style:solid;">

通常最好在样式表中定义样式(这样所有元素都可以进行样式设置，而无需查找和更改每个元素的 style属性) :

table {
border-color: #000;
border-width: 1px;
border-style: solid;
/* or, of course,
border: 1px solid #000;
*/
}