我有一个html表,它有一些具有rowspan的行,td的简单边框是1px纯黑色,但是我需要在具有rowspan的“行”组上制作一个较粗的边框。对不起,我的英语,我将添加一个图像以使其更清晰。
这就是我需要制作表格的方式:我尝试添加
table tr{
border: 2px solid black;
}
但是它也使没有行跨的行变得更厚。
有人在CSS或JS中有解决方案吗?
table{
border-collapse: collapse;
text-align: center;
}
table td, table th{
border:1px solid black;
padding: 0px 14px;
}
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</table>
如果可以修改实际的标记,则可以使用多个tbody元素,然后设置样式:
table {
border-collapse: collapse;
text-align: center;
}
table td,
table th {
border: 1px solid black;
padding: 0px 14px;
}
table tbody {
border: 4px solid black;
}
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
</table>
如果您不能修改您的实际标记,并且可以使用Jquery,则可以通过以下方式实现:
$(document).ready(function() {
//Remove the actual tbody
$('tr').unwrap();
//Give the th a thead element
$('th').first().parent('tr').wrap('<thead></thead>');
//Evaluate wich td has rowspan and wrap on tbody based on number of rowspans
$('td').each(function() {
if ($(this).attr("rowspan") != undefined) {
var numb = parseInt($(this).attr("rowspan"), 10),
par = $(this).parent('tr').index('tr');
$("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
}
})
})
检查代码段
$(document).ready(function() {
$('tr').unwrap();
$('th').first().parent('tr').wrap('<thead></thead>');
$('td').each(function() {
if ($(this).attr("rowspan") != undefined) {
var numb = parseInt($(this).attr("rowspan"), 10),
par = $(this).parent('tr').index('tr');
$("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
}
})
})
table {
border-collapse: collapse;
text-align: center;
}
table td,
table th {
border: 1px solid black;
padding: 0px 14px;
}
table tbody {
border: 4px solid purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</table>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句