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

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

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