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

71

为什么这样做？

<table border=1>

这不是吗？

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

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

html css

— 巴特·布特库斯
source

107

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

展开摘要

— 厄齐
source

嗨，谢谢您修复我的帖子。另外，您的CSS效果很好。令人沮丧的是他们没有简化语法。您的三种风格都是实现我的目标所必需和充分的。谢谢！

— Buttle Butkus

是否有任何理由不使用此表：table，td {border：1px实心黑色;}似乎不需要边界折叠就可以工作。

— Buttle Butkus，

具体取决于您要达到的目标：tutorialspoint.com/css/css_border-collapse.htm

— oezi 2011年

但这会将样式应用于页面中的每个表。是否可以通过表格指定样式？

— v.oddou 2014年

1

@ v.oddou按类（table.someclass）指定一些表，或按id（table#someid）指定一个表。

— Buttle Butkus

15

默认border-style值为none，因此您必须指定宽度以及颜色。

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

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

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

另请参见CSS中的 border属性和表格。

— 昆汀
source

1

谢谢。有趣的是，向我的css添加border-style：solid给该表提供了与使用oezi的css相同的外观，即使它没有指定border-collapse，但oezi的css也需要它。

— Buttle Butkus

1

不要忘记使用“ border-collapse：塌陷”，这将防止您的边框具有双精度，因为表格，tr和td将具有边框。

— 里卡多·里瓦尔多

7

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

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

JS小提琴演示。

通常最好在样式表中定义样式（这样，无需查找和更改每个元素的style属性即可对所有元素进行样式设置）：

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

JS Fiddle演示（或使用速记border符号）。

— 大卫说恢复莫妮卡
source

谢谢，您回答了我所有的问题，演示非常棒。我实际上正在使用样式表，但是将问题写为内联（我尝试了两个结果相同）。

— Buttle Butkus

绝对欢迎您；我很高兴获得帮助！=）顺便说一句，如果您认为您的问题已得到回答，请考虑接受（单击✔投票数下方的数字）对您最有帮助的答案。

— 大卫说，请

3

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

这应该工作。我将速记语法用于边框。

— TJ赫维尔
source

＆lt; table style ='border：1px纯黑色'＆rt; 确实会在整个表格周围添加边框，但不会在单个单元格周围添加边框。尽管如此，这肯定总比没有好。非常感谢。我现在给oezi投票，因为他不仅固定了我的职位，而且他的CSS非常完美。

— Buttle Butkus

3

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

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

或像这样：

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

— 金索6
source

0

像这样：

border: 1px solid black;

为什么不起作用？因为：

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

— 内森·Q
source

0

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

这只会在桌子周围添加边框。

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

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

HTML表避免空格的一件事

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

— 塞纳德·梅什金
source