CODEWITHSUNDEEP
javascriptcsshtmlhtml-table
GreenGiant
GreenGiant

Reputation: 521

Dynamic Cell Width

I have two tables one on top of the other. The top one is used to be the header so I can scroll down without losing the table column names. The second is a dynamically generated table that has various cell lengths. The second table also has dynamic input that changes the width of the cell. I was trying to figure out a way of setting the width of the top table (header) to change its cell length dynamically with the bottom table. I have searched Google and have only found static ways of doing this. Any help would be greatly appreciated. I do not expect a full code just a direction to get started. Here is my HTML5 code for the tables. 

<table style="width: 42EM" cellpadding="0" cellspacing="0" class ='FeatureHEAD'border = '1'id ='tableHEAD'>
    <tr>

                                        <th >Date</th>
                                        <th >Time(s)</th>
                                        <th >Expected Act</th>
                                        <th >Video Name</th>
                                        <th >Status</th>
                                </tr>


 <div style="overflow: auto;height: 22EM; width: 43EM;" class ='FeatureTable'>
  <table style="width: 42EM;" id='tableBody' border='1'>  </table>

Upvotes: 0

Views: 413

Answers (2)

Luca
Luca

Reputation: 9705

you could use a thead element for your header and then a tbody as the container of your dynamically generated content. you can then play with css to get the the tbody to scroll - you need to set a fixed height to the <tbody>, e.g. height: 200px, it depends on your design - in this case, if the height of all the <tr> exceeds the height set on the <tbody>, a scrollbar will appear. you may want to set oveflow-y: auto as that's the only one you will need.

This does not require any extra javascript and the cells will all keep the same width as they are nested in the same table.

It also makes sense, semantically and for accessibility, as thead and tbody do exactly what their name says, without having to have two different tables.

<table style="width: 42EM" cellpadding="0" cellspacing="0" class ='FeatureHEAD'border = '1'id ='tableHEAD'>
<thead>
    <tr>

                                        <th >Date</th>
                                        <th >Time(s)</th>
                                        <th >Expected Act</th>
                                        <th >Video Name</th>
                                        <th >Status</th>
                                </tr>
</thead>

<tbody id='tableBody'>
</tbody>
</table>

Upvotes: 1

aldux
aldux

Reputation: 2804

I'd use jQuery and on window scrolling and resizing events, I'd loop through the data table header td's and replicate it's widths to the header table.

Upvotes: 0

Related Questions