html - 如何在不指定父级大小的情况下强制表中 td 的子级使用 td 的 100% 空间？

Question

我有一张这样的表格

<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"andabsolute和. 可点击的 div 使用了所有空间，但是包含日期的单元格不会调整到其内容（单元格的宽度小于日期的长度）"clickeable-cpopup""content"td

我怎么能做到这一点？我想避免使 td 可点击。

固定单元格大小不是一个好的选择，仅包含的列<b>P</b>应该小于包含P和的列， dateP 可能成为日期，反之亦然，并且第一列的某些标题可能使用 2 行高度。当然width: auto也不行，100%因为"grid-item"没有固定的大小

标签： htmlcsshtml-table