是否可以使用COLPAN保存col
背景颜色?在下面的示例中,即使我使用 colspan="3"
,我也想在最后一个col中实现黄色。
请看一下上面的图片,我想使用colspan="3"
解决方案示例
错误的解决方案示例
谢谢!
table,
th,
td {
border: 1px solid black;
}
<table>
<colgroup>
<col span="2" style="background-color:#E6E6DC">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td colspan="3">Error descriotion, last col should be yellow</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
您只需在TD Colspan中添加一个" ID",
<td colspan="3" id="your id here">Error descriotion, last col should be yellow</td>
并将其添加到CSS
#your id here{
background-color: yellow;
}
更新
OP没有道理:
我想在最后一个col中实现黄色,即使我使用colspan =" 3&quot"
好吧,我切碎了那个大3个rowspan,现在最后一列是黄色的。好的,将中间行保持在
colspan='3'
,并使用<mark>
以将样式保存在<td>
中。请参阅更新的片段。
摘要
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style='border-collapse:collapse;table-layout:fixed;width:325px;'>
<colgroup>
<col span="2" style="background-color:red">
<col span='1' style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td colspan='3' style='padding:0'>Error description, last col should
<mark style='line-height:1.2;width:12.25ex;border-right:1.75px solid yellow;border-left:3.75px solid yellow;display:inline-block;padding:0 12px 0 2px;position:relative; left: 3px;'> be yellow</mark>
</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
尝试将类添加到Col并为Colspan应用相同的样式。
table, th, td {
border: 1px solid black;
}
table col.col-color, table td[colspan="3"]{
background-color: yellow;
}
<table>
<colgroup>
<col span="2" style="background-color:red">
<col class="col-color">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td colspan="3">Error descriotion, last col should be yellow</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>