带有黑色外边框但内边框为灰色的表格

Posted 2023-03-05

【中文标题】带有黑色外边框但内边框为灰色的表格

【英文标题】：Table with black outer, but grey inner border

【发布时间】：2011-02-08 19:32:51

【问题描述】：

我想创建一个带有 1pt 黑色外边框和每个 td 周围相同边框的 html 表格。

应该是这样的（当然只有边框）

我用

<table border="1" style="border-collapse:collapse; border-color:Black; border-style:solid; border-width:1pt">

结果我得到一个黑色的外边框，但内边框是灰色的。

【问题讨论】：

你在什么浏览器上测试？您的代码在 Chrome 上生成黑色（或任何指定的）内边框。

啊谢谢，很有趣！我使用 Internet Explorer。

您的问题并不清楚您是否想要灰色内边框（如标题所示）或者这是否是问题所在，并且您想要整个黑色边框。如果您希望始终使用黑色边框，您只需将 CSS 边框声明从 table 选择器移动到 td 选择器。

【参考方案1】：

你可以尝试在你的 CSS 样式表中实现类似的东西。

.mytable

border-collapse:collapse; 
border-color:#000000; 
border-style:solid; 
border-width:2px;


.mytable td

border-color:#cccccc; /*grey*/
border-style:solid; 
border-width:1px;

还有类似这样的 HTML：

<table class="mytable">
    <tr>
        <td>Content</td>
    </tr>
</table>

Example here

【讨论】：

css 选择器应该是 table.mytable - 没有空格 - 或者只是 .mytable。就像现在你在一个表中定位一个 .mytable 类。

太棒了！我认为它可以在不与 td 交谈的情况下工作，但似乎并非如此。

您的示例方便地在表格上有一个较厚的外边框，这是它优先于内部td 边框的唯一原因。这应该在你的回答中提到。话虽如此，OP 实际上说他想要“每个 td 周围都有相同的边界”。我怀疑他想要黑色、1px 的边框（内部不是灰色），这当然是一个更简单的问题。这个问题真的可以说得更清楚。