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

Question

为什么这个有效？

<table border=1>

这个不行吗？

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

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

- Buttle Butkus

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>

- oezi

---

嗨，感谢您修复我的帖子。此外，您的CSS效果很棒。只是令人沮丧的是，他们没有简化语法。 您的三种样式都是必要且足够实现我的目标。谢谢！ - Buttle Butkus

有没有不使用这个的理由： table，td {border: 1px solid black;} 它似乎可以在不需要边框折叠的情况下正常工作。 - Buttle Butkus

根据您想要实现的具体目标而定：http://www.tutorialspoint.com/css/css_border-collapse.htm - oezi

但是这适用于页面中的每个表的样式。有没有可能按表格指定样式？ - v.oddou

@v.oddou 可以通过类别（table.someclass）指定一些表格，或者通过 ID（table#someid）指定一个表格。 - Buttle Butkus

border-collapse: collapse; 有什么影响？ - Muhammad Umer

Answer 2

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

您可以使用border简写属性一次性设置这三个值。

此外，边框属性描述了表格和单元格的边框。CSS更加灵活，因此它仅描述了您选择的元素的边框。您需要同时选择单元格才能获得相同的效果。

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

请参见边框属性和CSS中的表格。

- Quentin

---

有趣的是，将border-style：solid添加到我的CSS中，使表格具有与使用oezi的CSS完全相同的外观，即使它没有指定border-collapse，但oezi的CSS需要它。谢谢。 - Buttle Butkus

不要忘记使用 "border-collapse: collapse"，这将防止您的边框在表格、行和单元格上都有边框时出现双重边框。 - Ricardo Rivaldo

Answer 3

原因在于，尽管设置了 border-width 和 border-color，但您没有指定 border-style：

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

JS Fiddle演示。

通常最好在样式表中定义样式（这样所有元素都会被样式化，而无需查找并更改每个元素的style属性）：

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

JS Fiddle演示（或使用缩写border符号）。

- David Thomas

---

谢谢，你回答了我所有的问题，演示也很棒。实际上我正在使用样式表，但是我把问题写成了内联的形式（我尝试了两种方式，结果都一样）。 - Buttle Butkus

非常欢迎，我很高兴能够帮助！ =）顺便提一下，如果您认为您的问题已得到解答，请考虑接受（点击投票计数下面的 ✔ ）对您最有帮助的答案。 - David Thomas

Answer 4

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

这应该可以正常工作。我使用边框的速记语法。

- TJHeuvel

---

<table style='border:1px solid black'&rt; 可以在整个表格周围添加边框，但不会在单元格周围添加。尽管如此，这肯定比没有好。非常感谢。我会投票给oezi，因为他不仅修复了我的帖子，而且他的css完美无缺。 - Buttle Butkus

Answer 5

您需要像这样添加边框样式：

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

或者像这样：

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

- Kimtho6

Answer 6

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

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

如果您想通过 CSS 实现相同的边框，请添加此规则：

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

还有一个关于HTML表格的问题是避免空格。

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

- Senad Meškin

Answer 7

像这样：

border: 1px solid black;

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

在更改边框颜色之前，始终先声明边框样式属性（例如我的示例中的实线）再声明边框宽度属性。元素必须先有边框才能更改颜色。

- Nathan Q