jquery - 对于 IE 和 Chrome， 宽度返回 0

Question

我有一个包含三列的表格。我正在使用标签来指定列的宽度。示例代码:

<table width="100%" border="1">
  <colgroup style="background-color:#FF0000;">
  <col width="100px" id="id1"></col>
  <col width="80px" id="id2"></col><col id="id3"></col></colgroup>
  <tbody>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
<tbody>
</table>

问题是 col ($("#id1").width()) 的宽度对于 IE 和 Chrome 返回 0，在 FF 中工作正常。如何获取 chrome 和 IE 中 col 的实际宽度？

Answer 1

对旧版 jQuery 进行简单的修改(col 在 Chrome 中没有宽度，但它的第一个单元格具有宽度)

<table width="100%" border="1">
  <colgroup style="background-color:#FF0000;">
  <col width="100px"></col>
  <col width="80px"></col><col id="id3"></col></colgroup>
  <tbody>
  <tr>
    <th id="id1">ISBN</th>
    <th id="id2">Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
<tbody>
</table>

这里 - http://jsfiddle.net/YD5mM/2/