jQuery中TD单元格宽度始终为0，如何实现表格均等列宽？

我之前也踩过这个坑！你遇到的TD宽度为0的问题，大概率是表格的自动布局逻辑在捣乱，加上可能没给表格本身设置明确宽度导致的。咱们直接上可行的解决方案：

核心思路 #

要让所有列宽度一致，必须强制表格使用固定布局模式（table-layout: fixed），这个属性会让表格优先遵循你设置的宽度规则，而不是根据单元格内容自动调整。再配合明确的表格宽度和均等的单元格宽度设置，就能搞定。

具体实现步骤 #

假设你的右侧区块宽度是600px，表格有4列，按以下方式设置：

1. 给表格设置固定布局和明确宽度
   把表格的宽度设为你需要的范围（比如占满右侧区块就用100%，或者固定像素值），同时开启固定布局：

   .equal-width-table {
     width: 100%; /* 或者你计算好的固定宽度，比如500px */
     table-layout: fixed; /* 关键！强制固定布局 */
     border-collapse: collapse; /* 可选，让边框合并更美观 */
   }
   

2. 给所有TD设置均等宽度
   你可以用百分比或者calc()来分配宽度，确保总宽度是100%：

   .equal-width-table td {
     width: calc(100% / 4); /* 4是列数，根据你的实际情况修改 */
     /* 或者用百分比：width: 25%; */
     border: 1px solid #ddd; /* 可选，方便看列宽效果 */
     padding: 8px;
   }
   

3. HTML结构示例

   <!-- 右侧区块容器 -->
   <div class="right-block">
     <table class="equal-width-table">
       <thead>
         <tr>
           <th>列1</th>
           <th>列2（内容较长）</th>
           <th>列3</th>
           <th>列4</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>短内容</td>
           <td>这是一段很长很长的测试内容，用来验证列宽是否均等</td>
           <td>中等内容</td>
           <td>短</td>
         </tr>
       </tbody>
     </table>
   </div>
   

为什么之前TD宽度为0？ #

当你只给TD设置宽度但没给表格设置table-layout: fixed和明确宽度时，表格默认用auto布局，会优先根据单元格内容计算宽度。如果表格本身没有被赋予宽度（比如容器比表格宽，但表格没设置宽度），浏览器可能会认为表格不需要占用空间，导致TD宽度被压缩到0。

额外提示 #

• 如果内容过长超出单元格，可以添加word-wrap: break-word让内容换行，避免撑破列宽：

  .equal-width-table td {
    word-wrap: break-word;
  }
  

• 用百分比设置TD宽度比固定像素更灵活，能适配容器宽度变化。

内容的提问来源于stack exchange，提问作者Frank Lehmann