Fixed Height and Changing Width for Header (HTML Table)

I need to make sure that the height of the header of table is fixed and width is adjusted based on the header cell content. (Header text is displayed in maximum two rows) How can we do it using styles? Also, I want to make sure that the width of table rows is same as width of header row (i.e., header row determines width).

Note: At present, “Transaction Department Owner Alias Name” comes in lines. It need to come in two lines.

enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>


</title><link href="Styles/TestStyle.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" /></head>



<body>


<div id = "divForTransactionGrid">

    <div>

            <table cellspacing="0" rules="all" border="1" id="grdTransactions" style="border-collapse:collapse;">

                            <thead>

                                            <tr>

                                                            <th scope="col">Transaction ID</th><th scope="col">Transaction Name</th><th scope="col">Transaction Owner</th><th scope="col">Transaction Department Owner Alias Name</th>

                                            </tr>

                            </thead><tbody>

                                            <tr>

                                                            <td>1</td><td>TR1</td><td>Lijo</td><td>Lijo</td>

                                            </tr><tr>

                                                            <td>2</td><td>TR2</td><td>Lijo</td><td>This is a test value to test the result in real time scenario. Row width should be same as header width</td>

                                            </tr>

                            </tbody>

            </table>

 </div>

</div>





</body>

</html>

CSS

#divForTransactionGrid 

{

width: 300px;

height: 250px;

overflow:scroll;

}

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You biggest issue is breaking.
Transaction Department Owner Alias Name
lets each space ” ” break to a new line, however
Transaction&nbsp;Department&nbsp;Owner&nbsp;Alias&nbsp;Name
will force the sentence to stay together as if a single word.

All you have to do is leave one regular space where you want it to break, and use &nbsp;’s where you don’t want it to break and you will have 2 or less lines. for exactly 2 lines, use a line break <br> instead of a breaking space ” “. Best of luck.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply