使用Jquery将TD宽度更改为％

Question

我正在接收电子邮件，并使其在主要网站上可读。我无法控制内容，但需要使其适合移动设备使用。我需要将表列的宽度更改为％而不是px。表可以嵌套。列数变化，列宽变化。

如何在每个表的第一个TR中获得每个TD？

   $("#emailer table").each(function (index) {
      // the table is now a % not px
      $(this).width('100%');

      // get the column widths
      var widths = [];

      var row = $(this).children('tr:first');
      $(row).first-child.children('td').each(function(){
         console.log('td width: '+$(this).width()); 
         widths.push($(this).width;
      });

      console.log(width_details);
    // next steps - add up the widths, convert to % then loop back through and update

   });

编辑：表格代码是由ckedit创建的，因此我可以依靠诸如tbody之类的东西。这是一个非常简化的版本，但是在内容的结构上却相当典型。

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td style="width:209px">
        <p><img alt="" src=""></p>
        <p><img alt="" src=""></p>
      </td>
      <td style="width:3px">&nbsp;</td>
      <td style="width:522px">
        <h2><strong>A reminder of the new ...</strong></h2>

        <p>We announced just before Christmas that ...</p>
      </td>
    </tr>
    <tr>
      <td style="width:209px">
        <p><img src=""></p>
      </td>
      <td style="width:3px">&nbsp;</td>
      <td style="width:522px">
        <p><strong>Special 25% price reduction</strong></p>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <a href=""><img src=""></a>
      </td>
    </tr>
    <tr>
      <td style=" width:209px">
        <p><img src=""></p>
      </td>
      <td style="width:3px">&nbsp;</td>
      <td style="width:522px">
        <p>The draft ...</p>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <p>
          <a href=""></a>
        </p>
        <table border="0" cellpadding="1" cellspacing="1" style="width:715px">
          <tbody>
            <tr>
              <td colspan="5" style="width:733.13px">
                <p><a href="">text</a></p>
              </td>
            </tr>
            <tr>
              <td colspan="5" style="width:733.13px">
              </td>
            </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0" style="width:728px">
          <tbody>
            <tr>
              <td>
                <p><strong>Regular Links</strong></p>
              </td>
              <td>&nbsp;</td>
              <td>
                <p><a href="">National Statistics</a></p>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

我最终使用了（主要是）香草javascript。我一直在想这个问题。

        for (var i = 0; i < tables.length; i += 1) {
            var table = tables[i];
            var origTableWidth = $(table).width();

            $(table).width('100%');
            var rowLength = table.rows.length;
            for (var j = 0; j < rowLength; j += 1) {
                var row = table.rows[j];
                var cellLength = row.cells.length;

                if (j === 0) {
                    var width_details = [];
                    for (var k = 0; k < cellLength; k += 1) {
                        width_details.push(getNewWidths(row.cells[k]));
                    }
                }

                for (var k = 0; k < cellLength; k += 1) {
                    var cell = row.cells[k];
                    $(cell).width(width_details[k]);
                }
            }
        }```