blocks|key|4492722|text|使用css在表格上添加边框有点复杂(但不是很复杂，请参阅this+jsfiddle+as+example)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4492723|​|4492724|table+{
++border-collapse:+collapse;
++border:+1px+solid+black;
}

table+td+{
++border:+1px+solid+black;
}|code-block|syntax|javascript|4492725|<table>
++<tr>
++++<td>test</td>
++++<td>test</td>
++</tr>
</table>|4492726|4492727|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/uzxWp/^0|S|O|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>Doing borders on tables with css is a bit more complicated (but not as much, see <a href="http://jsfiddle.net/uzxWp/" rel="noreferrer">this jsfiddle as example</a>):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border-collapse: collapse;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;test&lt;/td&gt;
    &lt;td&gt;test&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2877170|text|默认的border-style是none，所以您必须指定它以及宽度和颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2877171|您可以使用border速记属性一次性设置所有这三个值。|2877172|此外，属性描述了表格和单元格的边界。CSS更加灵活，因此它只描述所选元素的边框。您还需要选择单元格才能获得相同的效果。|BOLD|2877173|table,+th,+td+{
++++border:+solid+black+1px;
}|code-block|syntax|javascript|2877174|另请参见border+properties和tables+in+CSS。|2877175|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/box.html#border-properties|1|http://www.w3.org/TR/CSS21/tables.html^0|3|C|G|4|0|5|6|0|A|1D|0|0|0|10|4|H|0|M|D|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@$9|1A|A|1B|B|J]]|D|@]|E|$]]|$1|K|3|L|5|M|7|1C|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1D|8|@$9|1E|A|1F|B|J]]|D|@$9|1G|A|1H|1|1I]|$9|1J|A|1K|1|1L]]|E|$]]|$1|R|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

<p>The default <code>border-style</code> is <code>none</code>, so you must specify that as well as the width and the colour.</p>

<p>You can use the <code>border</code> shorthand property to set all three values in one go.</p>

<p>Also, the border attribute describes the border for the table <strong>and</strong> the 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.</p>

<pre><code>table, th, td {
    border: solid black 1px;
}
</code></pre>

<p>See also <a href="http://www.w3.org/TR/CSS21/box.html#border-properties" rel="noreferrer">border properties</a> and <a href="http://www.w3.org/TR/CSS21/tables.html" rel="noreferrer">tables in CSS</a>.</p>


blocks|key|4774855|text|它不起作用的原因是，尽管设置了border-width和border-color，但您没有指定border-style|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4774856|<table+style="border-width:1px;border-color:black;border-style:solid;">|code-block|syntax|javascript|4774857|JS+Fiddle+demo。|4774858|在样式表中定义样式通常更好(这样所有元素都可以样式化，而不必查找和更改每个元素的style属性)：|4774859|table+{
++++border-color:+#000;
++++border-width:+1px;
++++border-style:+solid;
++++/*+or,+of+course,
++++border:+1px+solid+#000;
++++*/
}|4774860|JS+Fiddle+demo+(Or+using+shorthand+border+notation)。|4774861|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/davidThomas/Thn9x/|1|http://jsfiddle.net/davidThomas/Thn9x/2/|2|http://jsfiddle.net/davidThomas/Thn9x/3/^0|F|C|S|C|1B|C|0|0|0|E|0|0|14|5|0|0|Z|6|0|E|1|G|Y|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|M|3|N|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@$9|1N|A|1O|1|1P]|$9|1Q|A|1R|1|1S]]|E|$]]|$1|S|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]|12|$5|V|W|X|E|$Y|13]]]]

<p>The reason it didn't work is that despite setting the <code>border-width</code> and the <code>border-color</code> you didn't specify the <code>border-style</code>:</p>

<pre><code>&lt;table style="border-width:1px;border-color:black;border-style:solid;"&gt;
</code></pre>

<p><a href="http://jsfiddle.net/davidThomas/Thn9x/" rel="noreferrer">JS Fiddle demo</a>.</p>

<p>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 <code>style</code> attribute):</p>

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

<p><a href="http://jsfiddle.net/davidThomas/Thn9x/2/" rel="noreferrer">JS Fiddle demo</a> (<a href="http://jsfiddle.net/davidThomas/Thn9x/3/" rel="noreferrer">Or using shorthand <code>border</code> notation</a>).</p>


blocks|key|2877010|text|<table+style='border:1px+solid+black'>
++++<tr>
++++++++<td>Derp</td>
++++</tr>
</table>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2877011|这应该是可行的。我使用边框的简写语法。|unstyled|2877012|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;table style='border:1px solid black'&gt;
    &lt;tr&gt;
        &lt;td&gt;Derp&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>This should work. I use the shorthand syntax for borders.</p>


blocks|key|2877101|text|您需要像这样添加边框样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2877102|<table+style="border:1px+solid+black">|code-block|syntax|javascript|2877103|或者像这样：|2877104|<table+style="border-width:1px;border-color:black;border-style:solid;">|2877105|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You need to add border-style like this:</p>

<pre><code>&lt;table style="border:1px solid black"&gt;
</code></pre>

<p>or like this:</p>

<pre><code>&lt;table style="border-width:1px;border-color:black;border-style:solid;"&gt;
</code></pre>


blocks|key|4492632|text|<table+style="border:+5px+solid+black">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4492633|这只会在表格周围添加一个边框。|unstyled|4492634|如果您希望通过CSS使用相同的边框，则添加以下规则：|4492635|table+tr+td+{+border:+5px+solid+black;+}|4492636|HTML表避免空格的一件事|4492637|<table+cellspacing="0"+cellpadding="0">|4492638|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|O|3|-4|5|F|7|W|8|@]|9|@]|A|$]]]|P|$]]

<pre><code>&lt;table style="border: 5px solid black"&gt;
</code></pre>

<p>This only adds a border around the table.</p>

<p>If you want same border through CSS then add this rule:</p>

<pre><code>table tr td { border: 5px solid black; }
</code></pre>

<p>and one thing for HTML table to avoid spaces</p>

<pre><code>&lt;table cellspacing="0" cellpadding="0"&gt;
</code></pre>


blocks|key|4492663|text|如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4492664|border:+1px+solid+black;|code-block|syntax|javascript|4492665|为什么它不起作用？因为：|4492666|4492667|始终在边框宽度属性之前声明边框样式(在我的示例中为solid)属性。元素必须有边框才能更改颜色。|blockquote|4492668|4492669|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|T|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Like this:</p>

<pre><code>border: 1px solid black;
</code></pre>

<p>Why it didn't work? because:</p>

<blockquote>
  <p>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.</p>
</blockquote>


<p>Why does this work?</p>

<pre><code>&lt;table border=1&gt;
</code></pre>

<p>And this doesn't?</p>

<pre><code>&lt;table style="border-width:1px;border-color:black"&gt;
</code></pre>

<p>I get the same result in Chrome and in IE9.</p>


How do I set <table> border width with CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

为什么这是可行的？<table border=1>这个不是吗？<table style="border-width:1px;border-color:black">我在Chrome和IE9上得到了同样的结果。

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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