带有自定义边框的表

Question

我正在尝试制作类似于以下内容的表格：

这是我的代码：

<table bordercolor="#000000">
    <tr>
        <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player1 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player2 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player3 Status
        </th>
        <th  width="200" style="border-bottom: 2px dashed;">
            Player4 Status
        </th>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Your Trun!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200">Not Your Turn!</td>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200">Remaining Moves: 5</td>
    </tr>
</table>

但是我在删除Your Trun!语句时遇到了问题，表格将是这样的：

我该如何解决这个问题？

Answer 1

只需使用 ：

<table bordercolor="#000000">
    <tr>
        <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player1 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player2 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player3 Status
        </th>
        <th  width="200" style="border-bottom: 2px dashed;">
            Player4 Status
        </th>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">&nbsp;</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200">Not Your Turn!</td>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200">Remaining Moves: 5</td>
    </tr>
</table>

jsFiddle：http://jsfiddle.net/Vgk2W/

Answer 2

css属性“empty-cells：show;”也可以在更现代的浏览器中工作   测试：http://jsfiddle.net/Vgk2W/1/
  支持：http://www.quirksmode.org/css/tables.html