HTML table ignoring element-style width

html, html-table

Solution

I can see from your fiddle that you already have a good grasp on how to get the word truncation and such in-place. I think you may find it useful to do something like the following:

<table>
  <colgroup>
    <col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
    <col />
    <col />
  </colgroup>

  <!-- the rest of your table here -->
</table>

This method works with the HTML specification in a way that is compliant - and will resize the whole column. If you instead change the `display` of the cell to `inline-block`, as mentioned above, what will happen is that you take the cell out of the table's flow - and other stylistic changes may cease working.

By styling the entire `col` using the code above, you use the `table` element's `table-layout: fixed` styling to your advantage instead.

Additionally - I noticed that you have the cells set up to use `text-overflow: ellipsis;` Check out this article on quirksmode to understand why it's not working. The fix you need is to make the following edit:

th, td {
    border: solid #4682B4 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-align: center;

    white-space: nowrap; /* Add this line */
}

Problem

HTML table ignoring element-style width I have an HTML table where certain cells have very long text contents. I want to specify a width (in pixels) for these cells using jQuery, but the rendered table just ignores the given width. Is there any way to force the table to respect this width? Thanks! JSFiddle: http://jsfiddle.net/sangil/6hejy/35/ (If you inspect the cell you can see the the computed width is different than the element-style width) HTML: ``` <div id="tblcont" class="tblcont"> <table id="pivot_table"> <tbody> <tr> <th id="h0" >product</th> <th id="h1" >price</th> <th id="h2" >change</th> </tr> <tr> <!-- this is the cell causing trouble --> <td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td> <td id="c01" >3212</td> <td id="c02" >219</td> </tr> <tr> <td id="c10" >Acer</td> <td id="c11" >3821</td> <td id="c12" >206</td> </tr> </tbody> </table> </div> ``` CSS: ``` .tblcont { overflow: hidden; width: 500px; } table { table-layout: fixed; border-collapse: collapse; overflow-x: scroll; border-spacing:0; width: 100%; } th, td { overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; } th { height: 50px; } ``` ​Javascript: ``` $(document).ready(function() { // THIS LINE HAS NO EFFECT! $('#c00').width(30); });​ ```

Original source