Как обернуть границу таблицы вокруг строк, которые не заполнены?

Я хотел бы создать таблицу, состоящую из нескольких ячеек в нескольких строках, и когда количество ячеек не соответствует 100% размеру таблицы, граница основной таблицы не будет отображаться как точный квадрат, а скорее обернется вокруг содержание.

Например:

<table border="2px">
 <tbody><tr>
 <td>1</td><td>2</td>
 </tr>
 <tr>
 <td>3</td>
 </tr>
</tbody></table>

Это текущая ситуация:

Это то, к чему я стремился:

3 ответа

Возможно!

Благодаря героическим личным усилиям я воспроизвел вашу графику, используя css только из вашего html.

http://codepen.io/anon/pen/Ekoxl

Он работает следующим образом:

table {
 display: block;
}

tr {
 display: block;
 float: left;
 clear: left;
 position: relative;
 border-style: solid;
 border-width: 3px;
 background-color: white;
 border-color: #999 #333 #333 #999;
}
tr:nth-child(n+2) {
 border-width: 0 3px 3px 3px;
}
tr:nth-child(n+2)::before {
 content: "";
 display: block;
 background-color: #fff;
 position: absolute;
 width: 100%;
 top: -3px;
 height:4px;
}
tr:nth-child(n+2)::after {
 content: "";
 display: block;
 background-color: #999;
 position: absolute;
 width: 3px;
 height: 4px;
 top: -3px;
 left: -3px;
}

td {
 display: inline-block;
 border: solid #666 1px;
 margin: 2px
}


Вы можете добиться этого, включив избыточные ячейки и сокрыв их с помощью свойства empty-cells CSS.

HTML

<table border="0" cellspacing="0" cellpadding="0">
 <tbody><tr>
 <td>1</td>
 <td>2</td>
 </tr>
 <tr>
 <td>3</td>
 
 </tr>
</tbody></table>

CSS

table td {empty-cells:hide;border:3px ******;}

Обратите внимание, что самой таблице не задана граница, а непосредственно сами ячейки. К сожалению, это не будет работать в сочетании с border-collapse:collapse; декларация.

См. Демонстрацию jsFiddle

редактировать

Если требуется вторая граница, вы можете использовать ****** значение свойства border-style. Обновленный CSS выше и скрипка, чтобы отразить это.


вы не можете сделать это за столом, но можете достичь этого через div и css

еще я показал, что может сделать td с небольшим стилем

пожалуйста, проверьте

<table border="2px">
<tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td></tr>
</tbody></table>

<table cellspacing="0" cellpadding="1">
<tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td></tr>
</tbody></table>

licensed under cc by-sa 3.0 with attribution.