CSS col видимость: коллапс не работает на Chrome

Я пытаюсь скрыть некоторые столбцы в HTML-код. Использование MDN colgroup и col добавлены, и я играю со стилем cols.

<td> с текстом контента "видимый" виден во всех браузерах (хорошо), с текстом контента "скрытый" виден в chrome (плохо) и скрыт в Firefox и Edge. (хорошо).

Кратчайший код, который я мог бы воссоздать, здесь:

<!doctype html>
<html>
    <head>
        <title>css example</title>
        <style type='text/css'>
            col.visible {}
            col.hidden { visibility:collapse; }
        </style>
    </head>
    <body>
        <table border='1'>
            <colgroup>
                <col class='visible'>
                <col class='hidden'>
                <tbody>
                    <tr>
                        <td>visible</td>
                        <td>hidden</td>
                    </tr>
                </tbody>
            </colgroup>
        </table>
    </body>
</html>
Источник

3 ответа

Решение

Вы правы, Chrome неправильно поддерживает видимость: сверните строки и столбцы таблицы - следите за ошибкой для обновлений. Мы планируем заняться этим в ближайшие несколько месяцев, но, вероятно, он не будет стабильным до конца 2017 года. Извините за плохие новости.

Источник

visibility: collapse не должен быть назначен col, но td, Это будет хорошо работать:

td.hidden { visibility:collapse; }
    <body>
        <table border='1'>
            <colgroup>
                <col>
                <col>
                <tbody>
                    <tr>
                        <td>visible</td>
                        <td class='hidden'>hidden</td>
                    </tr>
                </tbody>
            </colgroup>
        </table>
    </body>

Если вы хотите скрыть все td с конкретного col использовать td:nth-of-type(n) селектор (замена n с порядковым номером столбца).

Источник

Что касается Chrome 92, симптомы такие же: <col style =visibility:collapse> делает столбец невидимым, но его ширина не равна нулю, поэтому таблица занимает такую ​​же ширину, как если бы она не свернута.

Идея использования <colgroup> + <col> состоит в том, чтобы избежать добавления разметки к каждому <td> в столбце.

Источник
Другие вопросы по тегам