列中的单元格宽度不同

时间:2016-09-15 13:01:08

标签: html css html-table frontend css-tables

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

这是我的代码和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>

我已经尝试了表格布局固定属性,但它似乎不起作用.. 我知道已经有很多与这些问题相关的问题,但事情并没有对我有用。

4 个答案:

答案 0 :(得分:0)

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

我刚从display: inline-block;th中删除了td

答案 1 :(得分:0)

结帐

&#13;
&#13;
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)%";
}
&#13;
<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>
&#13;
&#13;
&#13;

您需要添加宽度:&#34;(100 / x)%&#34 ;;

答案 2 :(得分:0)

我认为这是你想要的:

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;
}

答案 3 :(得分:0)

您描述的行为听起来像是<table>元素的默认行为。在您的CSS中,您已为<th>设置了<td>的所有displayinline-block元素:

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

这导致这些元素不会根据同一列中的其他元素自动调整其大小。如果我已正确理解您的描述,则从css中移除display: inline-block(以及table-layout: fixed;以防止细胞相互溢出)应该会产生正确的行为。

display<th>元素的默认<td>值为table-cell,并且不应该是您需要或需要的很多情况改变这一点。有关不同display值如何影响元素布局的基本概述,请参阅w3schools CSS display Property参考。