1

我制作了一个应用了边框折叠的表格。这是我们所有表格的 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>
4

2 回答 2

0

我找到了这个链接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>
于 2013-05-23T14:26:19.510 回答
0

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

<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;
}
于 2013-05-24T13:35:59.767 回答