你能告诉我如何使用表格在行上添加边框吗?
这是我的代码
.table_view_el {
border: 1px solid
}
.table_view_el tr {
border: 1px solid
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
<tbody>
<tr style="
/* outline: 1px solid; */
border-bottom: 1px solid red;
/* border-bottom: 1pt solid black; */
">
<th>Party</th>
<th>Lead Seats</th>
<th>Win Seats</th>
<th>Total Seats</th>
</tr>
<tr style="
/* border-bottom: 1px solid black; */
padding: -1px;
">
<td>INC</td>
<td>0</td>
<td>120</td>
<td>120</td>
</tr>
<tr>
<td>BJP</td>
<td>0</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>JD(S)</td>
<td>0</td>
<td>37</td>
<td>37</td>
</tr>
<tr>
<td>OTH</td>
<td>0</td>
<td>15</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
最佳答案
我通常在表格上应用两个边框,然后在单元格上应用两个相反的边框:
.table_view_el {
border-right: 1px solid;
border-bottom: 1px solid;
}
.table_view_el th,
.table_view_el td {
border-top: 1px solid;
border-left: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
<tbody>
<tr style="
">
<th>Party</th>
<th>Lead Seats</th>
<th>Win Seats</th>
<th>Total Seats</th>
</tr>
<tr style="
">
<td>INC</td>
<td>0</td>
<td>120</td>
<td>120</td>
</tr>
<tr>
<td>BJP</td>
<td>0</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>JD(S)</td>
<td>0</td>
<td>37</td>
<td>37</td>
</tr>
<tr>
<td>OTH</td>
<td>0</td>
<td>15</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
如果您只想要行,请将左边框从单元格移动到表格
关于html - 如何使用表格在行上添加边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50275821/