Skip to content

JS 设置表格列宽无效

Published: at 04:29 PMSuggest Changes

解决公司 bug 的时候碰到了这样的一个问题,没法设置 table 的列宽。

先看用 F12 的 devtool 看代码,这段代码是 jsp 生成的。

<table>
  <tr>
    <td><input type="checkbox"> </td>
    <td>$100.00</td>
  </tr>
  <tr>
    <td><input type="checkbox"> </td>
    <td>$80.00</td>
  </tr>
</table>

F12 一顿猛调,不管怎么加属性,它的初始宽度就是不对

网上一顿查,无果,开始谦虚请教群里的群友。一位管理员 嘟嘟(8 年资深前端) 和我说她也遇到过这种情况,

她说,要用子代选择器,这里是单选框,给这个 text 设置宽度,让它吧 td 撑开。

另一位群友**写作星空,读作 NASA(原名蕾姆)**表示 td 某些情况下可以设置宽。

结合上面两点线索,我大概知道原因了。首先去看 jsp 代码,进行了下面的修改,果然正常了

<table>
  <c:forEach var="data" items="${data.getDataList()}" varStatus="status">
    <tr>
      <td width="70px" fieldName="id">${data.id}</td>
      <td width="70px" fieldName="name">${data.name}</td>
      <td width="70px" fieldName="itemCount">${data.itemCount}</td>
      <td width="70px" fieldName="sumScore">${data.sumScore}</td>
      <td width="70px" fieldName="extraAttrs">
        ${data.extraAttrs}
      </td>
    </tr>
  </c:forEach>
</table>

Previous Post
Safari 字体设置无效排查及解决方案
Next Post
JavaScript 获取鼠标所在区域的 DOM 元素