Html 如何使用 CSS 设置 <table> 边框宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7764553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set <table> border width with CSS?
提问by Buttle Butkus
Why does this work?
为什么这样做？
<table border=1>
And this doesn't?
而这不是？
<table style="border-width:1px;border-color:black">
I get the same result in Chrome and in IE9.
我在 Chrome 和 IE9 中得到相同的结果。
回答by oezi
Doing borders on tables with css is a bit more complicated (but not as much, see this jsfiddle as example):
用 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>回答by Quentin
The default border-styleis none, so you must specify that as well as the width and the colour.
默认border-style为none，因此您必须指定它以及宽度和颜色。
You can use the bordershorthand property to set all three values in one go.
您可以使用border速记属性一次性设置所有三个值。
Also, the border attribute describes the border for the table andthe cells. CSS is much more flexible so it only describes the border of the elements you are selecting. You need to select the cells too in order to get the same effect.
此外，border 属性描述了表格和单元格的边框。CSS 更加灵活，因此它只描述您选择的元素的边框。您也需要选择单元格以获得相同的效果。
table, th, td {
border: solid black 1px;
}
See also border propertiesand tables in CSS.
回答by David says reinstate Monica
The reason it didn't work is that despite setting the border-widthand the border-coloryou didn't specify the border-style:
它不起作用的原因是，尽管设置了border-width并且border-color您没有指定border-style：
<table style="border-width:1px;border-color:black;border-style:solid;">
It's usually better to define the styles in the stylesheet (so that all elements are styled without having to find, and change, every element's styleattribute):
通常最好在样式表中定义样式（这样所有元素都可以设置样式而无需查找和更改每个元素的style属性）：
table {
border-color: #000;
border-width: 1px;
border-style: solid;
/* or, of course,
border: 1px solid #000;
*/
}
回答by Kimtho6
You need to add border-style like this:
您需要像这样添加边框样式：
<table style="border:1px solid black">
or like this:
或者像这样：
<table style="border-width:1px;border-color:black;border-style:solid;">
回答by TJHeuvel
<table style='border:1px solid black'>
<tr>
<td>Derp</td>
</tr>
</table>
This should work. I use the shorthand syntax for borders.
这应该有效。我使用边框的速记语法。
回答by Senad Me?kin
<table style="border: 5px solid black">
This only adds a border around the table.
这只会在表格周围添加边框。
If you want same border through CSS then add this rule:
如果您希望通过 CSS 获得相同的边框，请添加以下规则：
table tr td { border: 5px solid black; }
and one thing for HTML table to avoid spaces
和 HTML 表格避免空格的一件事
<table cellspacing="0" cellpadding="0">
回答by Nathan Q
Like this:
像这样：
border: 1px solid black;
Why it didn't work? because:
为什么它不起作用？因为：
Always declare the border-style (solid in my example) property before the border-width property. An element must have borders before you can change the color.
始终在 border-width 属性之前声明 border-style（在我的示例中为实线）属性。元素必须有边框才能更改颜色。
