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="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;

}

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.