Перерыв a <tr> с использованием только CSS

Я ищу способ "разбить" строку таблицы, используя только CSS.

Я хочу изменить это:

К этому:

У меня нет доступа к HTML, но я могу управлять CSS.

Я пробовал

td:nth-child(3) {
    display: block;
}

Но это не работает.

Вот несколько упрощенных кодов для тестирования:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
td:nth-child(3) {
    display: block;
    background-color: yellow;
}
</style>
</head>

<body>
<table border="1">
    <tr>
        <td>111111</td>
        <td>222222</td>
        <td>333333</td>
        <td>444444</td>
    </tr>
</table>
</body>
</html>

Ответ 1

Как использовать inline-block с фиксированной таблицей width... или используя % примерно 45% of width для ваших элементов td, поэтому вам не нужно будет определять width для table

Демо

Здесь просто поворачиваю td в display: inline-block; и из-за фиксированной таблицы width они будут вынуждены переноситься на следующую строку.

Также я использую свойство word-wrap: break-word;, так что нераспределенные строки вынуждены ломаться.

table {
    width: 120px;
}

table tr td {
    width: 50px;
    word-wrap: break-word;
}

table tr td {
    display: inline-block;
    margin-top: 2px;
}

Вы можете использовать % на основе width, так что вам не нужно заботиться о ширинах ячеек....

Возможно, вам понадобится vertical-align: top; вместе с min-height, если ячейка пуста в вашем table

table tr td {
    display: inline-block;
    margin-top: 2px;
    vertical-align: top;
    min-height: 20px;
}

Демо (требуется только в том случае, если ячейка пуста)

Обратите внимание, что inline-block вызовет некоторые проблемы с смещением 4px, в этом случае просто назначьте font-size: 0; на table и снова установите font-size назад для вашего элемента td, таким образом вы получите согласованность в полях ячеек.

Предупреждение: я никогда бы не рекомендовал делать такие вещи, поэтому сохраните это как ваш последний приоритет. Если у вас есть JavaScript-контроль, чем рассмотрите возможность добавления tr вокруг td

Отныне игнорируйте, если вы не можете использовать jQuery, предположим, что у вас есть библиотека jQuery, вы можете просто добавить фрагмент к этому файлу JS....

(Am добавляет class здесь, чтобы однозначно идентифицировать элемент, class также можно добавить, используя .addClass(), определив некоторый ближайший селектор CSS), поэтому не нужно изменять здесь HTML.

$('table.wrap_trs tr').unwrap(); //Remove default pre-generated tr
var cells = $('table.wrap_trs tr td');
for (var i = 0; i < cells.length; i += 2) {
    cells.slice(i, i + 2).wrapAll('<tr></tr>'); //Wrapping the tds with tr
}

Демо

Ответ 2

Вы можете использовать свойство float и играть с шириной TD, поскольку вам нужно настроить ширину границы таблицы

table{
        width:100%;
    }

td:nth-child(3) {
    display: block;
    background-color: yellow;
}


tr td {
    float: left;
    width: 49.5%;
}

Надеюсь, это поможет! но необходимо проверить совместимость браузера

Ответ 3

Правильный метод CSS, простой и легкий

Это может вам помочь, но это может создать проблему для переменной длины, поэтому я использовал min-width

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style>

    td:nth-child(3) {
        display: block;
        background-color: yellow;
        clear:left;
    }
    tr{
    float:left;
    }
    td{
    float:left;
    min-width:100px; //used min-width for proper alignment
    }
    </style>
    </head>

    <body>
    <table border="1">
        <tr>
            <td>111111</td>
            <td>222222</td>
            <td>333333</td>
            <td>444444</td>
        </tr>
    </table>
    </body>
    </html>