在表格内显示表格标题标签答案

【问题标题】：Display table caption tag inside table在表格内显示表格标题标签
【发布时间】：2019-01-24 14:01:39
【问题描述】：

我正在尝试使表格的边框和背景围绕标题标签，而不是出于可访问性原因将其排除在外。我是用来显示类似于 th 标签的。

我尝试添加和删除边框，但边框和背景样式位于我不想更改（或复制）的样式表中，这使得这具有挑战性。

<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th colspan="2">What I want caption to look like</th></tr>
<tr><td>Data cell</td><td>Data cell</td></tr>
</table>

例子：

.border-background-stylesheet {
  border:#222222;
  background:#00EE00;
}

    <table class="border-background-stylesheet">
    <caption>Caption</caption>
    <tr><th colspan="100">What I want caption to look like</th></tr>
    <tr><td>Data cell</td><td>Data cell</td></tr>
    </table>

【问题讨论】：

您应该将 .border-background-stylesheet css 添加到您的问题中（如果您将代码块替换为包含该 css 的 sn-p 会更好）。
@benvc 我添加的内容有用吗？
@BrandonFowler - 点击蓝色大按钮，告诉我！（确实有效）
@enhzflep 哇，这真的很酷。谢谢！
@BrandonFowler - 它基本上就像 JSFiddle - 但就在页面上。只需在发布时将图标悬停，您就会知道是哪一个（我很少使用它并且忘记了，所以只要我需要该功能时就将它们悬停）

标签： html html-table

【解决方案1】：

这似乎满足要求：

基本上，为整个表格设置边框，然后将其从顶部移除。接下来，为整个标题添加边框，然后将其从底部移除。

结果？两个块看起来只是一个。

.border-background-stylesheet
{
	background:#00EE00;
	border: solid 1px black;
	border-top: none;
}

caption
{
	background:#00EE00;
	border: solid 1px black;
	border-bottom: none;
}

<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th>What I want caption to look like</tr></th>
</table>

【讨论】：

我一直在寻找一种方法，我不需要为标题使用单独的 CSS，至少在背景和边框 CSS 方面是这样
嗯，它们是 2 个独立的元素，据我所知，它们的设计目的不是以您想要的方式呈现，因此 CSS tom-foolery。对不起！稍等片刻，看看你是否得到更好的答案。在获得新贡献时，接受答案通常有点有害。