HTML table ignoring element-style width

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

Answer 2

Table cells by default fit to their content and ignore your width.

Other possibility to the already provided answers:

Surround the text with some other container:

<td id="c00" ><div>Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>

And change its width:

$('#c00 div').width(30);

Answer 3

You have a few issues:

table-layout: fixed tells the columns to be equal.

Then, even if you take that out, your text is wider than 30 pixels, with no spaces, so it's not going to go narrower than that "aaaaaaaaaa" etc. You'll need to make the text smaller, or add spaces.

Finally, width should be "30px" (in quotes).

Hope that helps.