列中的单元格没有相同的宽度答案

【问题标题】：Cells in Columns doesn't have same width列中的单元格没有相同的宽度
【发布时间】：2017-01-23 12:23:15
【问题描述】：

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

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

我已经尝试过表格布局固定属性，但它似乎不起作用.. 我知道已经有很多与这些东西相关的问题，但我没有解决。

【问题讨论】：

你为什么用display: inline-block 代替td 和th？
因为如果我不这样做，那么文本会溢出并且溢出：如果数据很长，hidden 属性会隐藏单元格中的数据
那是因为你已经为表格写了white-space: nowrap...你可以省略吗？

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

【解决方案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)%";

【讨论】：

我在这里运行代码 sn-p，它似乎可以工作，但它不适用于我的项目。检查代码后 Chrome 说无效的属性值。
哦，好的，我明白了。我不得不删除显示内联块。谢谢大佬

【解决方案2】：

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

我刚刚从您的ths 和tds 中删除了display: inline-block;。

【讨论】：

是的..现在文本相互溢出，如果我确实溢出：隐藏，则数据被隐藏。有什么事吗？
谢谢您的回复先生。通过删除空白，数据将流向第二行。但我通过放置宽度找到了解决方案：“（100 / x）％”;并删除显示内联块..

【解决方案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;
}

【讨论】：

感谢您的回复，如果数据太长，我不想将数据放在第二行的单元格中。按照我发现的方式，这会影响表格的整体设计我的解决方案。 jsfiddle.net/vatsal18/bxypmurs

【解决方案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（和 table-layout: fixed; 以防止单元格相互溢出）应该会导致正确的行为。

<th> 和<td> 元素的默认display 值是table-cell，在很多情况下您不希望或需要更改它。有关不同的display 值如何影响元素布局的基本概述，请参阅 w3schools CSS display Property 参考。

【讨论】：

感谢您的回复先生。但我通过放置宽度找到了解决方案：“（100 / x）％”;并删除显示内联块。