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

【问题标题】：How do I set <table> border width with CSS?如何使用 CSS 设置 <table> 边框宽度？
【发布时间】：2011-10-14 07:44:14
【问题描述】：

为什么会这样？

<table border=1>

这不是吗？

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

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

谢谢。有趣的是，在我的 css 中添加border-style:solid 使表格的外观与使用 oezi 的 css 完全相同，即使它没有指定边框折叠，但 oezi 的 css 需要它。
别忘了使用“border-collapse:collapse”，这将防止你的边框有一个double，因为table，tr和td会有边框。

【解决方案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;
    */
}

【讨论】：

【解决方案4】：

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

这应该可行。我使用边框的简写语法。

【讨论】：

【解决方案5】：

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

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

或者像这样：

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

【讨论】：

【解决方案6】：

像这样：

border: 1px solid black;

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

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

【讨论】：

【解决方案7】：

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

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

如果您希望通过 CSS 获得相同的边框，请添加以下规则：

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

HTML 表格的一件事是避免空格

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

【讨论】：