Setting table column width in CSS (if necessary, JavaScript)

Question

Okay, I have changed from using JavaScript to CSS in aligning the column width. But for some reasons it still won't line up. I want every td in a fixed width percentage, and the thead with the same too.

Eg. If you search "cherry" the width will change, but I want it to be fixed. shouldn't it be 40px all the time with the current code?

fiddle

Thank you very much.

<table id="table-body">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>ad</th>
            <th>Tel</th>
            <th>Fax</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>12311</td>
            <td>Apple</td>
            <td>A1fgsdfgfhynfg</td>
            <td>1-11</td>
            <td>1-22</td>
        </tr>
        <tr>
            <td>12312</td>
            <td>Banana</td>
            <td>A2dfgdfgdfgdfg</td>
            <td>2-11</td>
            <td>2-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>3-11</td>
            <td>3-22</td>
        </tr>
        <tr>
            <td>12314</td>
            <td>Duriaen</td>
            <td>A456ghkfghk</td>
            <td>4-11</td>
            <td>4-22</td>
        </tr>
        <tr>
            <td>12315</td>
            <td>Apple</td>
            <td>A1uyjmghtd</td>
            <td>5-11</td>
            <td>5-22</td>
        </tr>
        <tr>
            <td>12316</td>
            <td>Banana</td>
            <td>A2yukmkfgmufc</td>
            <td>6-11</td>
            <td>6-22</td>
        </tr>
        <tr>
            <td style="width:70px;">3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>123117</td>
            <td>Duriaen</td>
            <td>A4nuftkｆ</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
        <tr>
            <td>123118</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
        <tr>
            <td>123119</td>
            <td>Cherry</td>
            <td>Aoikdhpnko</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4ueowrqp</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
        <tr>
            <td>12311</td>
            <td>Duriaen</td>
            <td>A4zcnnzcxt</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
    </tbody>
</table>

CSS

#table-body, table.header tr> *:nth-child(1) {width:10px;}
#table-body, table.header tr> *:nth-child(2) {width:10px;}
#table-body, table.header tr> *:nth-child(3) {width:40px;}
#table-body, table.header tr> *:nth-child(4) {width:20px;}
#table-body, table.header tr> *:nth-child(5) {width:20px;}

Is your main goal to have the search box below the thead? And are you trying to match the head to the body or the body to the head? — Daved
– Daved, Commented Mar 10, 2015 at 0:46
@Daved match body to the head. // Is your main goal to have the search box below the thead? My main goal is have a fixed thead and vertically scroll-able tbody with a input in between. — Maki
– Maki, Commented Mar 10, 2015 at 0:55

Daved · Accepted Answer · 2015-03-11 01:08:10Z

1

You only need to adjust the first row of TDs in order to set the widths for all of them. I would suggest removing the thead once you clone it, since you really have no need for it anymore, and then reference the first row of the tbody and set the widths.

You can also clean up some of what you have in the code and update your CSS to handle more of it than you are currently. For instance, you can set your table to a 100% width and do similar for the search bar. Then you are just resizing the TDs on resize instead of everything else.

Anyways, for what I am talking about regarding the cells, here is the code, assuming you update the row that adds class for header_hidden to just remove the thead. It's all in the fiddle: http://jsfiddle.net/b42vn2nh/83/

var tds = $('#table-body tr').first().children('td');
var ths = $('table.header th');
for (var i = 0;i< tds.length;i++) {
    tds.eq(i).css('width',ths.eq(i).width());
}

Update: I see an issue with the resize function causing the width to continually grow when you resize the page. This is because calculations are being done with the set TD widths. I updated the Fiddle to correct that:

This one has the cells set to the same size more accurately and when you shrink the width really small, it uses overflow:hidden on the cells to keep them closer together. The problem is you end up with a scrollbar because the width will exceed the parent. The only way t avoid that in this case is with an overflow-x: hidden on the bodywrapper: http://jsfiddle.net/b42vn2nh/87/

Because of that scenario above, I adjusted the resize function a bit to show the table body being bound to the wrapper confines. It does this by toggling the width of the body to 100% before setting the header width. It then sets it back. Hiding cell overflow fails in this case, though, because it only works with a fixed table-layout and width of 100%. You can either leave it be and not worry about really small resizing, or use the word-break property on cells to force the wrapping. http://jsfiddle.net/b42vn2nh/89/

The line up might not be 100% across major browsers, but it's pretty damn close.

P.S. Just copy your CSS for the widths into the bottom of the CSS for the Fiddle and it should apply fine.

Update: Okay, I see what you meant by the search results affecting things. The reason this happens is because only a visible cell can affect the sizing for the column. Because of this, when the search hides the first row of cells because they don't match, the sizes no longer apply.

However, the same goes for a heading. And knowing that, we can modify the code to empty the TH elements instead of removing them entirely, and then we can set the width on the THs instead of the first row of the body. To prevent the empty THs from affecting layout, we use CSS to set their height and padding to 0.

The updated Fiddle: http://jsfiddle.net/b42vn2nh/91/

edited Mar 11, 2015 at 1:08

answered Mar 10, 2015 at 1:56

Daved

2,0921 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Maki Over a year ago

Daved, thank you for the answer and suggestion. Extra thanks that you demonstrated the suggested with an edited version!! I have applied it to what I am actually using it for and it doesn't align properly. I have edit the list details to be a more detailed to what my list actually looks like. Mind to take another look please? jsfiddle.net/b42vn2nh/84 ......... so your are suggesting that I set each td width for 1st tbody's tr?

Daved Over a year ago

They appear the same size to me. What browser and what specific issue are you seeing? As for your last question, yes. If you set the width on the TD elements for the first row of the body, it will apply to all cells.

Maki Over a year ago

I tested it on Chrome and IE9. The header of 2nd and 3rd column are easiest to tell that it is not aligned. On the latest edit jsfiddle.net/b42vn2nh/84 ...

Maki Over a year ago

Daved, for now I don't think I can use JavaScript (or I'm just not skilled enough) to set the td width. I have 2000+ cells minimum so I want to avoid class for each. I have took your idea of let the css handle more, and tried to set it with css. Although, the results are still concluded with errors.

Daved Over a year ago

@maki How are you getting the 2000+ cells to the page?

|

Collectives™ on Stack Overflow

Setting table column width in CSS (if necessary, JavaScript)

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related