如何使表格的外边框与 HTML 中的内边框颜色不同？ [复制]答案

【问题标题】：How to make outer border of table to be of a colour different from inner in HTML? [duplicate]如何使表格的外边框与 HTML 中的内边框颜色不同？ [复制]
【发布时间】：2012-04-09 15:42:03
【问题描述】：

我想要的是这个

我得到的是这个

我的代码是

<table border="2" cellpadding="10" bordercolor="blue">

我不想单独编辑每个 td 标签。
更重要的是，我的项目中不会使用任何样式表。

【问题讨论】：

如果您不能包含样式表，请使用<style> 标签
虽然这也是不允许的，但请您详细说明一下？
这能回答你的问题吗？ Using CSS to make table's outer border color different from cells' border color
如果这是某种 HTML 学习问题，并且不允许使用内联样式或样式表，建议您另找一门课程。

标签： html html-table border styling

【解决方案1】：

这里有两种可能的解决方案（据我所知）：

将表格（带有标准或银色边框）包裹在带有蓝色边框的 div 中。
在另一个表格的单元格中插入表格（带有标准或银色边框）。给“外部”表格一个蓝色边框。

我认为第一个选项要好得多。

【讨论】：

第一个选项需要一个样式表。（如果允许使用样式表，则不需要 div 技巧。）
不，它没有，只需使用<div> 的style="" 属性
@JukkaK.Korpela 我同意 Mimisbrunnr：div tag
@Mimisbrunnr，style 属性的内容是一个样式表。
@JukkaK.Korpela - 我很确定它是 (X)HTML 元素的属性，而不是样式表。它可以为它所包含的元素定义样式规则，但它不是样式表

【解决方案2】：

有两种方法可以定义页面的样式规则。一种是在单独的文件中进行，并通过<link ... /> 包含它，第二种方法是使用<style> 标记，最好在文档的<head> 中。

<style type="text/css">
  table {
      border-color:#00F;
  }
  table td {
      border-color:#ccc;
  }
</style>

或类似的东西，应该做你想做的事。请注意，我说过最好将样式放在<head> 中，但它可以出现在文档中的任何位置。

【讨论】：

【解决方案3】：

<table cellpadding="2"><tr><td bgcolor="blue">
<table border="1" frame="void" cellpadding="10" bgcolor="white">
  <tr><td>foo<td>bar
  <tr><td>foo<td>bar
</table>
</table>

这很棘手，结果与您的口头描述相匹配，但与图像不匹配。边框是实心的，但我认为没有办法在 HTML 中设置边框颜色而不使边框实心。

诀窍是将真实表格放置在单个单元格表格中，移除真实表格周围的表格 (frame="void") 并在包含真实表格的单元格上设置背景颜色。背景颜色设置为所需的边框颜色。然后真正的桌子需要一个白色背景（或任何你的整体背景），因为默认情况下它是透明的。假边框的宽度由外表的cellpadding控制。

代码是有效的 HTML 4.01 过渡代码（而 bordercolor 属性虽然得到广泛支持，但无效）。

当然，使用样式表会容易得多。除了比赛或有奇怪规则的家庭作业，我能想象的唯一情况是创作环境，你不能注入style 或link 元素，需要在body 中工作。但即使在那里，您实际上也可以使用 style 元素——浏览器允许这样做，即使规范不允许这样做。

【讨论】：

【解决方案4】：

您可以在表格中为外部表格边框要求提供边框颜色，并在表格 td 中为内部 td 边框提供边框。

查看小提琴以获得更好的理解：- http://jsfiddle.net/nTFAF/4/

【讨论】：

您的示例在表格上方便地具有较厚的外边框，这就是为什么它优先于内部td 边框。将table 边框设置为3px，它就会消失得无影无踪。是的，这是一个奇怪的野兽 CSS。