显示带有边框折叠的表格边框答案

【问题标题】：Show table border with border collapse显示带有边框折叠的表格边框
【发布时间】：2013-05-24 21:35:59
【问题描述】：

我制作了一个应用了边框折叠的表格。这是我们所有表格的 CSS 标准。

我的新表格需要在行标题旁边的一小部分作为颜色。因为 td 标签上有填充，所以 div 不会拉伸整个距离。同样的问题也适用于添加一个只包含彩色位的新表格单元格。

这个想法是添加边框可以解决问题，并且它会起作用，除了边框折叠。所以问题在http://jsfiddle.net/dtv6P/ 中得到了演示，您可以在其中看到专门应用于一个单元格的左边框，位于表格的可见边界之外。我尝试将“border-collapse：separate”应用于单元格，但这似乎不起作用，有什么想法吗？

edit* 根据数据行从数组中选择颜色

基本想法代码（不是我的实际代码）

<head>
<style>
td {
border: 2px solid black;
padding: 4px;
}

table {
border-collapse: collapse
}
</style>
</head>

<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td style="border-left: 10px solid;">1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>

【问题讨论】：

我不确定我是否理解您想要做的事情：是为您的第一个单元格添加颜色吗？或者你是想让那个边界“进入”单元格吗？如果是这样，应用背景图像可以解决问题吗？编辑：只需阅读有关选择颜色的编辑...我可能会建议使用一个专用于颜色的容器，您可以在 TD 内将所选颜色应用到该容器上，并具有绝对定位
我正在尝试为第一行单元格添加颜色（不是全部），但不是所有单元格。最好我想让边界进入单元格内。我可以在不制作实际图像文件的情况下应用背景图像吗？还是 td 的背景颜色而不适用于整个事物？
嗯，好的，没有。背景不能应用于整个 td。这才是重点。只是第一个单元格的第一位。关于您的编辑，我确实尝试使用顶部和底部为 0 的 div，但这并没有绕过 td 使用的填充。
我也试过了......这有点棘手，你是对的，使用填充你会得到一个空白。不知道你是否也能得到你想要的东西而不使用一点 javascript...
如果您知道如何使用 javascript 修复它，我一定会看看

标签： html css

【解决方案1】：

我找到了这个链接http://www.w3schools.com/cssref/pr_border-collapse.asp，发现它很有帮助。

<head>
<style>
table {
border-collapse: collapse
}
table,  td {
border: 2px solid black;
padding: 4px;
}


</style>
</head>

<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>

【讨论】：

我是在征求关于还可以做什么的建议，而不是关于基础知识的参考网站的链接。

【解决方案2】：

这是可行的...但您需要知道内容的高度...这不是很方便，但可行。

<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td><div class="withColor"></div>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>

用你的CSS

td {
border: 2px solid black;
padding: 4px;
height:20px;
}
td div.withColor {
position:absolute;
margin:-4px 0 0 -4px;
border-left:4px solid red;
height:28px;
}

【讨论】：