使用 CSS 的 HTML 表格列样式

Question

我有以下 HTML 表格，我需要在最后一列中使用不同的样式:
https://jsfiddle.net/dqa9y1g3/

table {
  border-collapse: collapse;
  border-right: 0px;
  border: 1px solid;
}

td {
  border: 1px solid;
}

thead {
  border: 2px;
}

th.th {
  border: solid;
}

th.th3 {
  border-top: 1px dashed;
  font-weight: normal;
}

<table>
  <thead>
    <tr>
      <th class="th">h1</th>
      <th class="th">h2</th>
      <th class="th3">h3</th>
    </tr>
  </thead>
  <tr>
    <td>r1c1</td>
    <td>r1c2</td>
    <td>r1c3</td>
  </tr>
  <tr>
    <td>r2c1</td>
    <td>r2c2</td>
    <td>r2c3</td>
  </tr>
</table>

正确的做法是什么？
这就是我想要得到的:

Answer 1

如果您特别需要定位最后一列，您可以使用它。 您还需要删除表格边框，因为它将绘制在单独的 th 或 td 边框上。

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
}

thead {
  border: 2px;
}

th.th {
  border: solid;
}

tr th:last-child,
tr td:last-child {
  border: 1px dashed #000;
  border-right: 0;
}

<table>
  <thead>
    <tr>
      <th class="th">h1</th>
      <th class="th">h2</th>
      <th class="th">h3</th>
    </tr>
  </thead>
  <tr>
    <td>r1c1</td>
    <td>r1c2</td>
    <td>r1c3</td>
  </tr>
  <tr>
    <td>r2c1</td>
    <td>r2c2</td>
    <td>r2c3</td>
  </tr>
</table>