如何更改 HTML 中表格行的高度？

Posted 2023-02-15

【中文标题】如何更改 HTML 中表格行的高度？

【英文标题】：How to change the height of table rows in HTML?

【发布时间】：2022-01-17 19:32:45

【问题描述】：

我有一张桌子，我想增加每一行的高度。到目前为止，我已经尝试将 height 属性添加到

<table class="table table-striped table-condensed table-bordered"  id="EntryTable">
                    <thead>
                        <tr class="select-background-color">
                            <th style="text-align: center; vertical-align: middle; width: 2%;  height: 100px;">ID:</th>
                            <th style="text-align: center; vertical-align: middle; width: 10%; height: 100px;">Action<span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%; height: 100px;">Detailed Action<span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%; height: 100px;">IAW <span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%; height: 100px;">Discrepancy Narrative <span style="color: red">*</span> </th>
                        </tr>
                    </thead>
                    <tbody id="tblActions" class="select-background-color"></tbody>
                </table>

我也试过从

<table class="table table-striped table-condensed table-bordered"  id="EntryTable">
                    <thead>
                        <tr class="select-background-color" style="height: 100%;">
                            <th style="text-align: center; vertical-align: middle; width: 2%;">ID:</th>
                            <th style="text-align: center; vertical-align: middle; width: 10%;">Action<span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%;">Detailed Action<span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%;">IAW <span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%;">Discrepancy Narrative <span style="color: red">*</span> </th>
                        </tr>
                    </thead>
                    <tbody id="tblActions" class="select-background-color"></tbody>
                </table>

【参考方案1】：

您可以在 tr 上使用 CSS line-height。示例：

<table class="table table-striped table-condensed table-bordered"  id="EntryTable">
                    <thead>
                        <tr style="line-height: 14px;" class="select-background-color">
                            <th style="text-align: center; vertical-align: middle; width: 2%;  height: 100px;">ID:</th>
                            <th style="text-align: center; vertical-align: middle; width: 10%; height: 100px;">Action<span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%; height: 100px;">Detailed Action<span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%; height: 100px;">IAW <span style="color: red">*</span></th>
                            <th style="text-align: center; vertical-align: middle; width: 28%; height: 100px;">Discrepancy Narrative <span style="color: red">*</span> </th>
                        </tr>
                    </thead>
                    <tbody id="tblActions" class="select-background-color"></tbody>
                </table>