Question

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

Answer 1

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 */
}