CODEWITHSUNDEEP
htmlcssasp.net
duk3csmaj0r
duk3csmaj0r

Reputation: 25

How to change the height of table rows in HTML?

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 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>

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 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>

Upvotes: 0

Views: 441

Answers (1)

Amine27
Amine27

Reputation: 93

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

<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>

Upvotes: 1

Related Questions