如何用CSS设置<table>边框宽度？

Question

为什么这样做？

<table border=1>

这不是吗？

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

我在Chrome和IE9中获得了相同的结果.

Answer 1

用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>

Answer 2

默认border-style值为none,因此您必须指定宽度和颜色.

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

此外,border属性描述了表和单元格的边框.CSS更灵活,因此它只描述您选择的元素的边框.您还需要选择单元格才能获得相同的效果.

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

Answer 3

它不起作用的原因是尽管设置了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;
    */
}