列中的单元格不具有相同的宽度

Question

我希望列中的所有单元格具有相同的宽度。将来会更改列的数量，因此具有最高宽度的单元格将是其各自列的默认宽度。 我希望我在这里解释了我的情况。我的代码是fiddle。

table.lead-data2 { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    white-space: nowrap; 
 
} 
 
table.lead-data2 th, 
 
table.lead-data2 td { 
 
    padding: 10px 15px; 
 
    display: inline-block; 
 
} 
 
table.lead-data2 tr { 
 
    border: 1px solid #eee; 
 
    border-right-color: transparent!important; 
 
    border-left-color: transparent!important; 
 
}

<table class="lead-data2" style="overflow-x:auto;"> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     <input type="checkbox" id="allcb" name="allcb"> 
 
     </th> 
 
     <th>Name</th> 
 
     <th>Status</th> 
 
     <th>Class</th> 
 
     <th>Contact No.</th> 
 
     <th>Last Updated</th> 
 
     <th>Follow Up</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" id="cb1" name="cb[]"> 
 
     </td> 
 
     <td>Appy Mccoy</td> 
 
     <td>Pending</td> 
 
     <td>8th A</td> 
 
     <td>8989898989</td> 
 
     <td>31 August 2016</td> 
 
     <td>31 August 2016</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" id="cb2" name="cb[]"> 
 
     </td> 
 
     <td>Andrew Damon</td> 
 
     <td>Pending for Now</td> 
 
     <td>8th A</td> 
 
     <td>8989898989</td> 
 
     <td>31 August 2016</td> 
 
     <td>31 August 2016</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" id="cb3" name="cb[]"> 
 
     </td> 
 
     <td>Ritesh Shukla</td> 
 
     <td>Confirmed</td> 
 
     <td>8th A</td> 
 
     <td>8989898989</td> 
 
     <td>31 August 2016</td> 
 
     <td>31 August 2016</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" id="cb4" name="cb[]"> 
 
     </td> 
 
     <td>Anup gupta</td> 
 
     <td>Pending</td> 
 
     <td>8th A</td> 
 
     <td>8989898989</td> 
 
     <td>31 August 2016</td> 
 
     <td>31 August 2016</td> 
 
    </tr> 
 

 

 
    </tbody> 
 
</table>

我已经试过表格布局固定属性，但它似乎并没有工作.. 我知道有很多已经涉及到这个东西的问题，但事情并没有为我工作了。

Answer 1

结帐

table.lead-data2{ 
 
    width: "(100/x)%"; 
 
    table-layout: fixed; 
 
    white-space: nowrap; 
 
    
 
} 
 

 
table.lead-data2 th, table.lead-data2 td{ 
 
    width: "(100/x)%"; 
 
    padding: 10px 15px; 
 
} 
 
    
 
    table.lead-data2 tr{ 
 
    border: 1px solid #eee; 
 
    border-right-color: transparent!important; 
 
    border-left-color: transparent!important; 
 
    width: "(100/x)%"; 
 
}

<table class="lead-data2" style="overflow-x:auto;"> 
 
      <thead> 
 
       <tr> 
 
       <th><input type="checkbox" id="allcb" name="allcb"></th> 
 
       <th>Name</th> 
 
       <th>Status</th> 
 
       <th>Class</th> 
 
       <th>Contact No.</th> 
 
       <th>Last Updated</th> 
 
       <th>Follow Up</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
      <td><input type="checkbox" id="cb1" name="cb[]"></td> 
 
       <td>Appy Mccoy</td> 
 
       <td>Pending</td> 
 
       <td>8th A</td> 
 
       <td>8989898989</td> 
 
       <td>31 August 2016</td> 
 
       <td>31 August 2016</td> 
 
      </tr> 
 
       <tr> 
 
      <td><input type="checkbox" id="cb2" name="cb[]"></td> 
 
       <td>Andrew Damon</td> 
 
       <td>Pending for Now</td> 
 
       <td>8th A</td> 
 
       <td>8989898989</td> 
 
       <td>31 August 2016</td> 
 
       <td>31 August 2016</td> 
 
      </tr> 
 
       <tr> 
 
      <td><input type="checkbox" id="cb3" name="cb[]"></td> 
 
       <td>Ritesh Shukla</td> 
 
       <td>Confirmed</td> 
 
       <td>8th A</td> 
 
       <td>8989898989</td> 
 
       <td>31 August 2016</td> 
 
       <td>31 August 2016</td> 
 
      </tr> 
 
       <tr> 
 
      <td><input type="checkbox" id="cb4" name="cb[]"></td> 
 
       <td>Anup gupta</td> 
 
       <td>Pending</td> 
 
       <td>8th A</td> 
 
       <td>8989898989</td> 
 
       <td>31 August 2016</td> 
 
       <td>31 August 2016</td> 
 
      </tr> 
 
       
 
       
 
      </tbody> 
 
      </table>

当你需要添加宽度： “（100/X）％”;

Answer 2

看一看这里：https://jsfiddle.net/gd8nzaxL/

我只是删除您th S和td S中display: inline-block;。

Answer 3

我觉得是这样的，你想：

table.lead-data2{ 
    width: 100%; 
    margin: 0 auto; 
    clear: both; 
    border-collapse: separate; 
    border-spacing: 0; 
} 

table.lead-data2 th, table.lead-data2 td{ 
    padding: 10px 15px; 
} 
table.lead-data2 tr{ 
    border: 1px solid #eee; 
    border-right-color: transparent!important; 
    border-left-color: transparent!important; 
} 

Answer 4

你所描述听起来像是<table>元素的默认行为的行为。在你的CSS，你已经给所有在表中的<th>和<td>元素display设置inline-block：

table.lead-data2 th, 
table.lead-data2 td { 
    padding: 10px 15px; 
    display: inline-block; 
} 

这将导致这些元素根据在同一列中的其他元素不会自动调整其大小。如果我正确理解了您的描述，则从css中移除display: inline-block（和以防止单元格溢出）将导致正确的行为。

为<th>和<td>元素的默认display值为table-cell和不应该有很多情况下，你会想要或需要改变这一点。有关不同的display值如何影响元素布局的基本概述，请参见w3schools CSS display Property参考。