列中的單元格不具有相同的寬度

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參考。