表列根据内容扩展宽度

Question

我的页面中有一个表格，总共有5列。其中3列具有静态宽度，其余列具有基于其内容的动态宽度。 我已将max-width设置为170px，将min-width设置为50px。然而，发生了两件奇怪的事： 1 -

1. 在检查中，我可以看到min-width（当单元格为空时）为188px，而max-width（当任何多余的字符将导致中断单词时）为408px。
2. 当span包含一小段文本时，就像一个单词一样，它会从左右两侧获得相当大的填充，但在检查中我会看到padding:0的每个方向。

我知道我的跨度未设置为display:block且其宽度等于其中的文本。所以我的专栏肯定有问题。

可以在此picture中看到发生的事件的实例。



由于我不确定哪个类或样式导致了这种情况，因此我复制了此动态列从检查窗口收到的每个样式，并将其放在此处。我还标记了我认为相关的那些：

-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
border-bottom-color: rgb(27, 25, 57);
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(27, 25, 57);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(27, 25, 57);
border-right-style: solid;
border-right-width: 2px;
border-top-color: rgb(27, 25, 57);
border-top-style: solid;
border-top-width: 2px;
**box-sizing: content-box;**
color: rgb(255, 255, 255);
direction: rtl;
**display: table-cell;**
font-family: iran, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 28.08px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 44px;
line-height: 37.1429px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
**max-width: 170px;**
**min-width: 50px;**
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
**position: relative;**
text-align: center;
vertical-align: middle;
**white-space: normal;**
word-break: break-all;
word-wrap: break-word;

我现在尝试过：

• white-space : pre;不仅可以向左右添加额外的填充，还可以向其他两个方向添加额外的填充。无法测试
• width:100;虽然解决了额外的填充问题，但只允许在检查窗口中展开宽度，并防止运行时的动态宽度。
• 使用div替换跨度并设置display:inline;没有不同。 margin:zero，也没有进展。 Negative解决了短跨度的问题，但让更长的跨度溢出单元格，这是可以预测的。

任何提供帮助的尝试都将受到高度赞赏。提前谢谢。

编辑：This is a jsFiddle显示会发生什么。 填充是从无处接收额外填充的那个......或者我无法看到的地方。

Answer 1

从早期评论中提出的答案：

min和max-width对表元素（或display：table family rules）无效。

基本上，表格会根据其内容进行扩展和缩小。除非您重置显示然后松开table-layout属性，否则它无法显示滚动条。 您可以通过width设置固定的table-layout:fixed，如果未设置width，则列可能会均匀分布。

您可以开始阅读此http://w3.org/wiki/CSS/Properties/table-layout以更好地了解table的行为方式。

  

好吧，我不希望我的表格单元扩展超过特定的width，我不得不设置max-width以使跨度分成两行。如果我没有初始化min和max，我仍然得到相同的结果，但它会扩展直到它获得所有可用空间。 - Sarah Amini

要覆盖此行为，您可能会在单元格中添加一个额外的包装器，您可以在其中设置最小和最大宽度。 ，不要为表本身设置宽度。然后根据封装器使用的空间大小。

  

我在这个单元格中放置了一个div，并将我的文本放入其中。仍然设置相同的额外填充。我主要需要消除那该死的填充物：D为什么它首先出现？！

将单元格缩小到最小宽度，您可以将width:XX设置为tds，这里的宽度实际上是指表格单元格的最小宽度（remenber扩展为内容大小）

在这种情况下，不要设置table-layout:fixed;单元格最初（如果为空）是XX宽度并且可以展开。 它将能够生长，直到div达到其max-width。

下面是一个可能与你自己的结构不一样的例子......

table,
td {
  border: 1px solid;
  margin:1em auto;/* will not affect tds */
}

td {
  width: 50px; /* equals min-width */
}

td>div {/* each div can have a different value set via a class or td:nth-child(x)> div*/
  max-width: 150px;
  overflow: hidden; /* ? */
  min-height: 1.2em;
}
/* not all the same ? */
td:nth-child(3) {
width:100px;
}
td:nth-child(3) > div{
max-width:200px;
}

<table><tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></table>

<table>
  <tr>
    <td>
      <div>LOREM PIXEL BLABLUM
      </div>
    </td>
    <td>
      <div>LONGERPIECEOFCONTENT
      </div>
    </td>
    <td><div></div></td><td><div></div></td><td><div></div></td>
  </tr>
</table>