Как аппроксимировать компоновку таблицы с помощью css, когда структура несвязана

У меня есть HTML, который я хочу использовать для отображения атрибутов display: table css. К сожалению, я не могу изменить HTML (или JS), только CSS (длинный рассказ). Это проблема, потому что структура существующего HTML вызывает проблемы для макета таблицы. Вот упрощенная версия HTML и CSS:

<style>
    .like-table { display: table;}
    .like-tr { display: table-row;}
    .like-th { display: table-cell; border: 1px solid gray;}
    .useless-div-1 { }
    .useless-div-2 { }
    .like-td { display: table-cell; border: 1px solid gray;}
</style>
<div class="like-table">
    <div class="like-tr">
        <div class="like-th">1</div>
        <div class="like-th">22</div>
        <div class="like-th">3</div>
    </div>
    <div class="useless-div-1"><div class="useless-div-2">
        <div class="like-tr">
            <div class="like-td">111</div>
            <div class="like-td">2</div>
            <div class="like-td">3</div>
        </div>
        <div class="like-tr">
            <div class="like-td">11</div>
            <div class="like-td">2</div>
            <div class="like-td">333</div>
        </div>
    </div></div>
</div>

К сожалению, это делает ширину столбцов заголовка и тела различной шириной:

enter image description here

Если я удалю "бесполезные-div- *" открывающие и закрывающие теги:

<div class="like-table">
    <div class="like-tr">
        <div class="like-th">1</div>
        <div class="like-th">22</div>
        <div class="like-th">3</div>
    </div>
    <div class="like-tr">
        <div class="like-td">111</div>
        <div class="like-td">2</div>
        <div class="like-td">3</div>
    </div>
    <div class="like-tr">
        <div class="like-td">11</div>
        <div class="like-td">2</div>
        <div class="like-td">333</div>
    </div>
</div>

Затем он отображает штраф, выравнивание ширины столбцов и столбцов:

enter image description here

Итак, есть ли что-нибудь, что я могу сделать для CSS, который приведет к тому, что первый набор HTML будет вести себя как второй? Помните, что я не могу изменить HTML или JavaScript - только CSS! Пожалуйста, не спрашивайте, почему...

Нажмите здесь, чтобы изменить код.

Ответы

Ответ 1

Поскольку вы обертываете table-row элементы useless-div, вы можете просто установить свойство display useless-div на table-row-group:

.useless-div { display: table-row-group; }

В таблицах таблиц CSS все элементы должны следовать тем же структурным свойствам.

Вот JSBin Demo.

Update

После того, как я поцарапал себе голову последние 5 часов, я понял, что с этим невозможно справиться по текущему пути.

Итак, я решил написать новые стили для создания гибкой таблицы CSS. Но сначала я должен упомянуть несколько вещей:

  • Чтобы выравнивать столбцы по вертикали, требуется установить определенную ширину для ячеек.
  • В следующем примере я установил границы, чтобы лучше отображать таблицу. из-за этого я использовал свойство box-sizing, чтобы заставить браузер вычислять ширину каждой ячейки, включая ее заполнение и границу. Если вам не нужно border, удалите его и свойство border-box.

Подход

.like-table {
  width: 400px;    /* You could declare a specific width. Your choice */
  margin: 0 auto;
}

.like-th, .like-td {
  float: left;    /* <--  Float the cells to stick together                    */
  width: 33.33%;  /* <--  I applied the same width on each cell.               */
  /* I've explained how to set specific width for each column in the following */

  border: 1px solid gray;          /* Add border around each cell */

  -webkit-box-sizing: border-box;  /* Force browser to calculate width+borders */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.like-tr:after { /* Clearfix hack */
  content: ' ';
  font: 0/0 a;
  display: block;
  clear: both;
}

Примечание.. Чтобы применить определенную ширину для каждого столбца (слева + центр + правый), сначала установите width на каждую ячейку, как я сделал выше, затем используйте следующие селекторы, чтобы переопределить применяемую ширину столбцов слева и справа:

.like-table .like-td:first-child, /* Selectors for the left column */
.like-table .like-th:first-child { 
  width: 100px;     /*  <-- Override the width for the left column */
  border-right: 0;  /* You might also want to remove right borders */
}

.like-table .like-td:last-child,  /* Selectors for the right column */
.like-table .like-th:last-child {
  width: 100px;      /* <-- Override the width for the right column */
  border-left: 0;    /* You might also want to remove left borders  */
}

JSBin Demo # 1. (ширина жидкости)

JSBin Demo # 2. (фиксированная ширина)