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

Question

为什么这样做？

<table border=1>

这不是吗？

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

我在Chrome和IE9中得到了相同的结果。

Answer 1

使用css在表格上做边框有点复杂（但不是那么多，请参阅this jsfiddle as example）：

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;
}

另请参阅border properties和tables in CSS。

Answer 3

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

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

JS Fiddle demo

通常最好在样式表中定义样式（以便在不必查找和更改每个元素的style属性的情况下设置所有元素的样式）：

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

JS Fiddle demo（Or using shorthand border notation）。

Answer 4

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

这应该有效。我使用边框的简写语法。

Answer 5

您需要添加如下边框样式：

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

或者像这样：

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

Answer 6

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

这只会在表格周围添加边框。

如果您想通过CSS使用相同的边框，请添加以下规则：

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

并且HTML表格有一点可以避免空格

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

Answer 7

像这样：

border: 1px solid black;

为什么它不起作用？这是因为：

  

始终在border-width之前声明border-style（我的示例中为solid）属性   属性。在更改之前，元素必须具有边框   颜色。