TH底边框应显示一半。怎么样？

Question

我正在使用HTML-表格并使用边框样式属性来应用边框（边框：1像素纯黑色）。

我的要求是：表中的每个th的底边框仅显示一半。像|tex__|。

Here是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>