Таблица с пользовательскими границами - PullRequest
Новая
       23

Таблица с пользовательскими границами

0 голосов
/ 15 августа 2011

Я пытаюсь сделать таблицу похожую на следующую:

enter image description here

Вот мой код: 

<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!, таблица будет выглядеть так:

enter image description here

Как я могу решить эту проблему?

Ответы [ 2 ]

2 голосов
/ 15 августа 2011

Просто используйте &nbsp;: 

<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/

1 голос
/ 15 августа 2011

css свойство "empty-cell: show;"может также работать в более современных браузерах
тест: http://jsfiddle.net/Vgk2W/1/
поддержка: http://www.quirksmode.org/css/tables.html

...