Question

我已经制作了一张应用了边框折叠的桌子。这是我们所有表格的css的标准。

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

这个想法是增加一个边界可以解决问题，除边境崩溃外，它会起作用。因此，问题在此处http://jsfiddle.net/dtv6P/进行了演示，您可以在其中看到专门应用于一个单元格的左边框，位于表格的可见边界之外。我试图将“border-collapse：separate”应用到单元格，但这似乎不起作用，所以任何想法？

编辑*从基于数据行的数组中选择颜色

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

<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>

Answer 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>

Answer 2

我不确定我理解你要做的是什么：它是否为你的第一个细胞添加颜色？或者你是想让那个边界“进入”细胞？如果是这样，应用背景图像就可以了？

编辑：只需阅读关于选择颜色的编辑...我可能会建议您使用一个专用于颜色的容器，您可以在TD中使用绝对定位来应用所选颜色

Answer 3

这是有用的东西......但是你需要知道你内容的高度......它不是很方便，但是很有效。

<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;
}

显示带边框折叠的表格边框

3 个答案: