table-layout: исправлено нерасширение таблицы-ячейки внутри абсолютной 100% ширины таблицы-строки (элементы также не сворачиваются)

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

Я использую relative/absolute потому что я использую динамически разбитые на страницы таблицы из огромных таблиц. Я делаю это, чтобы позволить пользователю быстро просматривать данные, не перегружая клиента.

Как вы можете видеть , table-rowрасширяется на 100%, но table-cell s не подчиняются table-layout:fixed. Нужно, чтобы table-cells расширился, чтобы заполнить все доступное table-row пространство.

(сторона обратите внимание, что border-collapse: collapse также не работает.)

Пожалуйста, помогите. Заранее большое спасибо!

HTML 

<div class="gridTable">
    <div class="gridRow">
        <div class="gridCell">a</div>
        <div class="gridCell">JKL;</div>    
        <div class="gridCell">Jb</div>  
    </div>
</div>

CSS 

.gridTable{
display:table;
table-layout:fixed;
position:relative;
border-collapse: collapse;
}
.gridHeaderRow{
top:0px;
}
.gridRow, .gridHeaderRow{
display:table-row;
position:absolute;
}
.gridCell{
display:table-cell;
}
.gridTable, .gridRow, .gridHeaderRow{
width:100%;
}
.gridTable, .gridTable *{
border-collapse:collapse;
}
.gridTable div{
border-color:black;
border-width:1px;
border-style:solid;
}
1 2
css tablelayout css-tables css-position

1 ответ:

Я удалил абсолютную позицию из правила строки, и это сработало для меня (chrome, firefox) 

.gridRow, .gridHeaderRow{
  display:table-row;
}

Если вы хотите иметь фиксированный заголовок, вы можете разделить заголовок следующим образом: 

<div class="gridTableBox">
    <div class="gridTable gridHeaderTable">
        <div class="gridRow">
            <div class="gridCell">T1</div>
            <div class="gridCell">T2</div>
            <div class="gridCell">T3</div>
        </div>
    </div>
    <div class="gridTable gridBody">
        <div class="gridRow">
            <div class="gridCell">a</div>
            <div class="gridCell">JKL;</div>
            <div class="gridCell">Jb</div>
        </div>
    </div>
</div>

Теперь вы можете дать gridHeaderTable div абсолютное положение, не нарушая компоновку таблицы.

Обновленная скрипка-этоздесь .

1