How to change the height of table rows in HTML?-CodePudding

I have a table, and I want to increase the height of each row. So far, I've tried adding the height attribute to the <th tag but no success, because the <th controls the header and not the rows.

<table   id="EntryTable">
                    <thead>
                        <tr >
                            <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" ></tbody>
                </table>

I've also tried taking the height attribute out of the <th tag and adding it to the <tr tag, but still no success. What am I doing wrong?

<table   id="EntryTable">
                    <thead>
                        <tr  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" ></tbody>
                </table>

CodePudding user response：

You can do it using CSS line-height on tr. Example:

<table   id="EntryTable">
                    <thead>
                        <tr style="line-height: 14px;" >
                            <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" ></tbody>
                </table>