Как заставить ребенка td в таблице использовать 100% пространства td без указания размера родителя? - PullRequest
Новая
       7

Как заставить ребенка td в таблице использовать 100% пространства td без указания размера родителя?

0 голосов
/ 01 ноября 2019

У меня есть таблица с таким форматом, как этот 

<table>
    <thead>
    <th> </th>
    <th>foo1</th>
    <th>foo2</th>
    </thead>
    <tbody>
    <tr>
        <th>Text that makes the cell use two lines of height</th>

        <td className="grid-item">
            <b>P</b>
        </td>

        <td className="grid-item">
            <div>✔ 17/10/2019</div>
        </td>

    </tr>
    /* more tr s */
    </tbody>
</table>

, и когда вы нажимаете внешнюю кнопку, получается что-то вроде этого: 

<table>
    <thead>
    <th> </th>
    <th>foo1</th>
    <th>foo2</th>
    </thead>
    <tbody>

    <tr>
        <th>Text that makes the cell use two lines of height</th>

        <td className="grid-item green_border">
            <div className="clickeable-cpopup">
                <b>P</b>
            </div>
        </td>

        <td className="grid-item green_border">
            <div className="clickeable-cpopup">
                <div>✔ 17/10/2019</div>
            </div>
        </td>

    </tr>
    /* more tr s */
    </tbody>
</table>

и div "clickeable-cpopup"имеет функцию onClick, и ему нужно заполнить все пространство своего td родителя, высоты и ширины, в противном случае я нажимаю td вместо div, и ничего не происходит.

"grid-item" имеет padding: 0 и я попробовал решение применить display: flex к "grid-item", оно работает при заполнении пространства, но формат таблицы испортился.

Также я попытался с лучшими результатами, выдав position: relative"grid-item" и absolute для "clickeable-cpopup" и "content". Div с кликабельным использованием использует все пространство в td, но тогда ячейка, содержащая дату, не подстраивается под ее содержимое (ширина ячейки меньше длины даты)

Как этого добиться? Я бы не хотел, чтобы тд кликабелен.

Исправление размера ячейки не является хорошим вариантом, столбец, который содержит только <b>P</b>, должен быть меньше, чем столбец, который содержит и P и date, P может стать датой, и наоборот, и некоторые заголовки первого столбца могут использовать 2 строки высоты. И, конечно, ни width: auto, ни 100% не работают, поскольку "grid-item" не имеет фиксированного размера

...