列中的单元格不具有相同的宽度
Cells in Columns doesn't have same width
我希望一列中的所有单元格都具有相同的宽度。将来会更改列数,因此宽度最大的单元格将是其各自列的默认宽度。
我希望我已经在这里解释了我的情况。
这是我的代码和 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>
我试过 table 固定布局 属性 但它似乎不起作用..
我知道已经有很多与此相关的问题,但对我来说并没有解决。
看这里:https://jsfiddle.net/gd8nzaxL/
我刚刚从您的 th
和 td
中删除了 display: inline-block;
。
结帐
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)%";
我想这是你想要的:
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;
}
您所描述的行为听起来像是 <table>
元素的默认行为。在您的 css 中,您已经为 table 中的所有 <th>
和 <td>
元素提供了 inline-block
的 display
设置:
table.lead-data2 th,
table.lead-data2 td {
padding: 10px 15px;
display: inline-block;
}
这导致这些元素不会根据同一列中的其他元素自动调整其大小。如果我正确理解了您的描述,从 css 中删除 display: inline-block
(以及 table-layout: fixed;
以防止单元格相互溢出)应该会导致正确的行为。
<th>
和 <td>
元素的默认 display
值为 table-cell
,在很多情况下您不希望或需要更改此值.有关不同 display
值如何影响元素布局的基本概述,请参阅 w3schools CSS display Property 参考。
我希望一列中的所有单元格都具有相同的宽度。将来会更改列数,因此宽度最大的单元格将是其各自列的默认宽度。 我希望我已经在这里解释了我的情况。
这是我的代码和 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>
我试过 table 固定布局 属性 但它似乎不起作用.. 我知道已经有很多与此相关的问题,但对我来说并没有解决。
看这里:https://jsfiddle.net/gd8nzaxL/
我刚刚从您的 th
和 td
中删除了 display: inline-block;
。
结帐
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)%";
我想这是你想要的:
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;
}
您所描述的行为听起来像是 <table>
元素的默认行为。在您的 css 中,您已经为 table 中的所有 <th>
和 <td>
元素提供了 inline-block
的 display
设置:
table.lead-data2 th,
table.lead-data2 td {
padding: 10px 15px;
display: inline-block;
}
这导致这些元素不会根据同一列中的其他元素自动调整其大小。如果我正确理解了您的描述,从 css 中删除 display: inline-block
(以及 table-layout: fixed;
以防止单元格相互溢出)应该会导致正确的行为。
<th>
和 <td>
元素的默认 display
值为 table-cell
,在很多情况下您不希望或需要更改此值.有关不同 display
值如何影响元素布局的基本概述,请参阅 w3schools CSS display Property 参考。