Question

我在项目中使用带有一个表的easyui-panel。

我想修复每个td宽度：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>

但它失败了。堆栈，约翰和股票都消失了。我的桌子处于异常状态。

当我删除“position：absolute; 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="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） - ＆gt;右键单击您的元素 - ＆gt;检查并在CSS样式部分查看框模型，以确定是否有任何额外的填充/边距被应用

Answer 2

您可以将HTML talbe设置为固定宽度，然后指定列宽：

<div  class="easyui-panel" id="pp"  style="margin-top:30px;width:100%">
    <table class="uTbId"  cellspacing="0" style=" table-layout:fixed;" >
    <col width="5px" />
    <col width="5px" />
    <col width="5px" />
    <col width="5px" />
    <col width="5px" />
     <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>

https://jsfiddle.net/56Lc4o44/

Answer 3

当我使用统一格式时，它可以正常工作

代码是：

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

如何修复表中的td宽度

3 个答案: