html - 如何固定表格中的 td 宽度

Question

我在我的元素中使用 easyui-panel 和一张表。

我想固定每个td width:50px;

这是我的代码:

<div  class="easyui-panel" id="pp"  style="margin-top:30px;width:100%">
        <table class="uTbId"  cellspacing="0" style="width:100%" >
         <tr>
           <td style="position:absolute;width:50px;background-color:#fafafa">stack</td>
           <td style="position:absolute;width:50px;background-color:#fafafa">john</td>
           <td style="position:absolute;width:50px;background-color:#fafafa">stock</td>
           <td style="position:absolute;width:50px;background-color:#fafafa">shansa</td>
         </tr>
         <tr>
           <td style="postion:absolute;width:50px;background-color:#fafafa">Joy</td>
         </tr>
        </table>
</div>

但它工作失败。堆栈、约翰和股票都消失了。我的 table 状态不正常。

当我删除“position:absolute;width:50px;”后，所有的名字都可以显示。like:

<div  class="easyui-panel" id="pp"  style="margin-top:30px;width:100%">
    <table class="uTbId"  cellspacing="0" style="width:100%" >
     <tr>
       <td style="background-color:#fafafa">stack</td>
       <td style="background-color:#fafafa">john</td>
       <td style="background-color:#fafafa">stock</td>
       <td style="background-color:#fafafa">shansa</td>
     </tr>
     <tr>
       <td style="background-color:#fafafa">Joy</td>
     </tr>
    </table>
 </div>

所有的名字都可以不固定宽度出现，但这不是我想要的。

谁能帮帮我？

Answer 1

您不需要同时删除 position:absolute和 width:50px .

删除 position:absolute和 width:100%来自 <table>应该会产生你想要的结果。所以现在你的 HTML 看起来像

<div  class="easyui-panel" id="pp"  style="margin-top:30px;width:100%">
    <table class="uTbId"  cellspacing="0">
     <tr>
       <td style="width:50px;background-color:#fafafa">stack</td>
       <td style="width:50px;background-color:#fafafa">john</td>
       <td style="width:50px;background-color:#fafafa">stock</td>
       <td style="width:50px;background-color:#fafafa">shansa</td>
     </tr>
     <tr>
       <td style="width:50px;background-color:#fafafa">Joy</td>
     </tr>
    </table>

如果结果不是您想要的，可能是某些 CSS 样式向 <td> 添加了额外的填充或边距。元素。启动开发人员控制台(在大多数浏览器上为 F12)-> 右键单击​​您的元素 -> 检查并在 CSS 样式部分查看盒模型以了解是否应用了任何额外的填充/边距