TH底部边框应显示一半.如何

Question

我使用HTML-Table并使用border-style属性来应用border(border:1px纯黑(。

我的要求是：表中每th，下边框只显示一半。像|tex__|。

这是我在jsfiddle中的代码链接。

这是我使用的代码：

th, td {
border: 1px solid;
}

<table>
		<tr>
<th>Month</th>
			<td>January</td>
<td>Feb</td>
		</tr>
		<tr>
<th>Salary</th>
			<td>$100</td>
<td>$200</td>
		</tr>
</table>

我该怎么做？

Answer 1

我将使用:after来实现。

th {
position: relative;
}
th:after {
content: " ";
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 1px;
background-color: #000;
}

<table>
<thead>
<tr>
<th>AAAAAAAA</th>
<th>BBBBBBBB</th>
<th>CCCCCCCC</th>
<th>DDDDDDDD</th>
</tr>
</thead>
</table>

Answer 2

扩展Chaska的答案

th {
position: relative;
border:1px solid #000;
border-bottom:0px;
}
th:after {
content: " ";
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 1px;
background-color: #000;
}

<table cellspacing="0">
<thead>
<tr>
<th>text</th>
</tr>
</thead>
</table>