Question

我有一个带地址和ID的简单表：

table, td, th {
  border: 1px solid black;
}
table {
  table-layout: fixed;
  width: 300px;
}
.id-col {
  width: 10%;
  min-width: 40px;
}

<table>
  <tr>
    <th class="id-col">id</th>
    <th class="address-col">Address</th>
  </tr>
  <tr>
    <td>1934</td>
    <td>Fieldstone Drive North Miami Beach, FL 33160</td>
  </tr>
  <tr>
    <td>34</td>
    <td>Grove Street Macon, GA 31204</td>
  </tr>
</table>

如您所见，id列中的内容可能会溢出其表格单元格。我尝试用min-width修复它，但是it seems not to work for tables。

我用flexbox解决了它：https://jsfiddle.net/bkn37qtt/ 现在它按预期工作，但我不确定这是好事，因为我丢失了表语义。

有没有办法用桌子做？也许我错过了一些事情，或者自2011年以来发生了什么变化（上面提到上面提到的问题）？

Answer 1

只需放下table-layout: fixed;即可离开。

这里我也缩短了列名，以使空内容列尽可能小。

对于屏幕较大且可以设置更宽表的用户，可以添加媒体查询以与每个标题的内部元素进行交互，并将其设置为固定宽度，溢出隐藏和省略号。

这样可以避免不必要的滚动到最大值，而无需固定的表格。

＆＃13;

.scroll-container {
  width: 300px;
  overflow-x: auto;
  border: 1px solid #eee;
}
table, tr, td, th {
  padding: 0;        /* remove padding/margin to make cells smallest possible */
  margin: 0;
}

table, td, th {
  border: 1px solid black;
}
table {
  max-width: 300px;
}
.id-col {
  width: 10%;
  /*min-width: 40px;    removed this as well to make it smallest possible *
}

＆＃13;

<div class="scroll-container">
  <table>
  <tr>
    <th class="id-col">id</th>
    <th class="address-col">Address</th>
    <th>Col3</th>
    <th>Col4</th>
    <th>Col5</th>
  </tr>
  <tr>
    <td>1934</td>
    <td>Fieldstone Drive North Miami Beach, FL 33160</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>34</td>
    <td>Grove Street Macon, GA 31204</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</div>

＆＃13;

Answer 2

试试这样：

<html>
<style>
table, td, th {
border: 1px solid black;
}
table {
width: 300px;
}
.id-col {
width: 10%;
min-width: 40px;
}
</style>
<table>
    <tr>
        <th class="id-col"><span>id</span></th>
        <th class="address-col">Address</th>
    </tr>
    <tr>
        <td>1934</td>
        <td>Fieldstone Drive North Miami Beach, FL 33160</td>
    </tr>
    <tr>
        <td>34</td>
        <td>Grove Street Macon, GA 31204</td>
    </tr>
</table>
</html>

Answer 3

如果我理解正确，您不需要固定的表格布局，因为理想情况下，表格行为是释放下一个可用单元格的可用空间。此外，您只需要删除已添加到TH以控制宽度的任何类。因为考虑一个场景，当你有更大的文本没有空格。它将螺丝设计。因此，我对您的代码进行了更改以提高响应速度。

<强> CSS：

table, td, th {
  border: 1px solid black;
}
table {
 width: 300px;
}
table tr>th:first-of-type,table tr>td:first-of-type{
  min-width: 40px;
  max-width:80px;
  word-break: break-all;
}

<强> HTML：

<table>
  <tr>
    <th >id</th>
    <th >Address</th>
  </tr>
  <tr>
    <td>1984</td>
    <td>Fieldstone Drive North Miami Beach, FL 33160</td>
  </tr>
  <tr>
    <td>34</td>
    <td>Grove Street Macon, GA 31204</td>
  </tr>
  <tr>
    <td>123218736218736</td>
    <td>Fieldstone Drive North Miami Beach, FL 33160</td>
  </tr>
</table>

<强> DEMO

干杯，

阿肖克

Answer 4

经过一番讨论后，我想出了一个解决方案，即flexboxes正确地解决了我的问题

我需要指定列的比例大小
我不希望列增长和溢出容器（有时没有table-layout: fixed的表）
我不关心合适的桌头内容。我可以添加省略号
我想为每列设置最小尺寸以防止崩溃单元格内容

使用display: flex的div上的标记更好地解决了这个问题，所以如果你遇到类似的问题，请使用flexboxes。

这是我的最终版本：https://jsfiddle.net/8jg8msw0/5/

P.S。另外值得注意的是，您必须为每一行指定大小。使用表格，只需将其设置在标题上即可。

Answer 5

我的修改：

使用填充
使用Colgroup
增加id-col百分比
最后删除表格布局

＆＃13;

      table, td, th {
        border: 1px solid black;
        padding:2px;
      }
      table {
        /*table-layout: fixed;*/
        width: 300px;
      }
      .id-col {
        width: 15%;
        min-width: 40px;
      }

＆＃13;

<table>
    <colgroup>
      <col class="con1" style="align: center; width: 15%" />
      <col class="con1" style="align: center; width: 80%" />    
    </colgroup>
    <thead>      
      <tr>
        <th class="id-col">id</th>
        <th class="address-col">Address</th>
      </tr>
    </thead>  
    <tbody>    
      <tr>
        <td>1934</td>
        <td>Fieldstone Drive North Miami Beach, FL 33160</td>
      </tr>
      <tr>
        <td>34</td>
        <td>Grove Street Macon, GA 31204</td>
      </tr>
    </tbody>
  </table>

＆＃13;

表格单元格约束

5 个答案: