表格单元格约束答案

【问题标题】：Table cell constraints表格单元格约束
【发布时间】：2016-04-04 07:09:10
【问题描述】：

我有一个带有地址和 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 列中的内容可能会溢出其表格单元格。我试图用最小宽度修复它，但是it seems not to work for tables.

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

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

【问题讨论】：

我无法删除table-layout:fixed，否则表格会溢出其容器并有时会导致水平滚动。
你仍然可以使用 flexbox 但保持表格标记正确吗？ jsfiddle.net/bkn37qtt/2
@MirkoGuarnier，是的，这是可能的选择之一。如果我下注，您知道我会进一步发现的任何警告吗？
现在被认为相当稳定。根据所需的浏览器支持，有 polyfills html5please.com/#flexbox
好的，谢谢。对我来说这看起来很奇怪，但我会尝试。

标签： html css html-table flexbox

【解决方案1】：

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

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

带有display: flex 的 div 标记更好地解决了这个问题，所以如果你和我有类似的问题，请使用 flexbox。

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

P.S. 另外值得注意的是，您必须为每一行指定大小。有了表，放在表头就够了。

【讨论】：

【解决方案2】：

只需删除table-layout: fixed;，您就可以开始了。

这里我也缩短了列名，以尽可能减少空的内容列。

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

这将在不需要固定表格的情况下最大限度地避免不必要的滚动。

.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 *
}

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

【讨论】：

我不能放弃它，因为出于某种原因它是必要的。我不想要水平滚动，但表格有时会导致它
@just-boris 可以去掉，因为使用table-layout: fixed;表示表格和列的宽度由table和col元素的宽度或第一行单元格的宽度设置.后续行中的单元格不会影响列宽。 您可以在此处了解更多信息：developer.mozilla.org/en-US/docs/Web/CSS/table-layout
@just-boris 告诉我表格溢出是如何导致滚动的，我会为你解决这个问题，因为上面的答案是如何按照你的要求去做。
是的，我尝试过这样做：jsfiddle.net/8jg8msw0 问题是我的真实示例有更多列而不是我最初的问题。
@just-boris 我假设您希望所有内容都可见，对吧？那么当内容不适合宽度时，您希望滚动出现在哪里？

【解决方案3】：

我的修改：

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

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

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

【讨论】：

你的代码对我不起作用，看截图：yadi.sk/i/t8Caw7nFmbSbb 是预期的吗？
这行不通。您通过增加宽度来修复它。我不能在我的项目上这样做。我有更多的列而不是我显示的

【解决方案4】：

如果我理解正确，您不需要固定表格布局，因为理想情况下表格行为是将可用空间释放到下一个可用单元格。此外，您只需要摆脱添加到 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

干杯，

阿肖克

【讨论】：

这很好，但对我不起作用，因为我的真实代码似乎更复杂。请参阅@LGSon 的答案的 cmets，我在那里附上了一个小提琴。
嗨，我们能做的最好的就是在新行中强制溢出单词。这里是演示：jsfiddle.net/Ashokkumargupta/8jg8msw0/3
我更喜欢省略号：jsfiddle.net/8jg8msw0/1 但它只适用于固定表。
这最终是你的决定，但省略号有时可能会隐藏一些有意义的文本。

【解决方案5】：

试试这样：

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

【讨论】：