Таблицы CSS: строка colspan для полной ширины таблицы

Question

У меня есть набор вложенных блоков с правилами display: table-*. Они составляют таблицу флюида (мне не нужно устанавливать конкретные размеры width).

Как добавить строку, которая colspans вся ширина таблицы? (примечание: строки находится между другими строками, а не в верхнем ни на дне)

Я нашел решение, опираясь на JS, где я вычислить разницу (в пикселях) между всей шириной и ширину строки (в зависимости от содержимого), и используйте ее как margin-right.

this example См

Но это не рассчитать размеры правильно (если вы проверить размеры веб-инспектор, по сравнению с теми, в console.log, вы видите несоответствие).

Возможно ли совмещение строки со всей шириной стола? Что такое другие решения/техника? (поскольку это имеет недостаток в том, что приходится пересчитывать каждый раз, когда изменяется окно браузера).

Answer 1

Нет реальных способов сделать это, так что это зависит от того, насколько далеко от вашего нынешнего макета вы чувствуете себя комфортно.

В этой версии каждая «строка» рассматривается как таблица, поэтому не имеет значения, сколько ячеек вы вставляете в каждую.

.table-row { 
 
    display: table; 
 
    width: 50%; 
 
    table-layout: fixed; 
 
    background: #ccc; 
 
} 
 
.title { 
 
    font-weight: bold; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    padding: 3px; 
 
} 
 
.colspan { 
 
    background-color: limegreen; 
 
}

<div class="table-row"> 
 
    <div class="cell title">1</div> 
 
    <div class="cell title">2</div> 
 
    <div class="cell title">3</div> 
 
    <div class="cell title">4</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell">content 1</div> 
 
    <div class="cell">content 2</div> 
 
    <div class="cell">content 3</div> 
 
    <div class="cell">content 4</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell colspan">how-do-I-make-this-colspan-the-whole-width-of-the-table-row?</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell">content 1</div> 
 
    <div class="cell">content 2</div> 
 
    <div class="cell">content 3</div> 
 
    <div class="cell">content 4</div> 
 
</div>

Это также относительно легко укладывать слишком

.table-row { 
 
    display: table; 
 
    width: 50%; 
 
    table-layout: fixed; 
 
    background: #ccc; 
 
    border-top: 1px solid #000 
 
} 
 
.table-row:last-child { 
 
    border-bottom: 1px solid #000 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    padding: 3px; 
 
    border-left: 1px solid #000; 
 
    color: #111; 
 
} 
 
.cell:last-child { 
 
    border-right: 1px solid #000 
 
} 
 
.title { 
 
    font-weight: 700; 
 
    background-color: #333; 
 
    color: #ccc; 
 
} 
 
.colspan { 
 
    background-color: #32cd32 
 
}

<div class="table-row"> 
 
    <div class="cell title">1</div> 
 
    <div class="cell title">2</div> 
 
    <div class="cell title">3</div> 
 
    <div class="cell title">4</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell">content 1</div> 
 
    <div class="cell">content 2</div> 
 
    <div class="cell">content 3</div> 
 
    <div class="cell">content 4</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell colspan">how-do-I-make-this-colspan-the-whole-width-of-the-table-row?</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell">content 1</div> 
 
    <div class="cell">content 2</div> 
 
    <div class="cell">content 3</div> 
 
    <div class="cell">content 4</div> 
 
</div>