表格列根据内容展开宽度 [英] Table column expand width based on content

问题描述

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

1. 在检查中，我可以看到 min-width(当单元格为空时)是 188px，而 max-width(当任何额外的字符会导致断字时)) 是 408 像素.
2. 当 span 由一小段文本(例如一个单词)组成时，它会从左到右获得相当大的填充，但在检查中，我看到每个方向的 padding:0.立>

我知道我的跨度没有设置为 display:block 并且它的宽度等于它里面的文本.所以我的专栏肯定有问题.

在这张

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

-webkit-font-smoothing:抗锯齿；-webkit-user-select:无；边框底色:rgb(27, 25, 57);边框底部样式:无；边框底部宽度:0px；边框折叠:折叠；边框图像起始:0px；边框图像重复:拉伸；边框图像切片:100%；边框图像源:无；边框图像宽度:1；边框左颜色:rgb(27, 25, 57);左边框样式:无；边框左宽度:0px；边框右颜色:rgb(27, 25, 57);边框右样式:实心；边框右宽度:2px；边框顶部颜色:rgb(27, 25, 57);边框顶部样式:实心；边框顶部宽度:2px；**框大小:内容框；**颜色:RGB(255、255、255)；方向:rtl；**显示:表格单元格；**字体系列:伊朗、'Helvetica Neue'、Helvetica、Arial、sans-serif；字体大小:28.08px；字体拉伸:正常；字体样式:正常；字体变体:正常；字体粗细:正常；高度:44px；行高:37.1429px；底边距:0px；左边距:0px；边距右:0px；边距顶部:0px；**最大宽度:170px;****最小宽度:50px;**填充底部:0px；填充左:0px；填充右:0px；填充顶部:0px；**位置:相对；**文本对齐:居中；垂直对齐:中间；**空白:正常；**断字:断断续续；自动换行:断字；

我现在尝试过的:

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

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

这是一个 jsFiddle，它显示了发生的情况.填充的是从无处接收额外填充的那个......或我看不到的地方.

解决方案

从之前的评论中得出的答案:

<小时>

min 和 max-width 对表格元素(或 display:table 系列规则)无效.

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

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

<块引用>

好吧，我不希望我的表格单元格扩展超过特定的 width，我不得不设置 max-width 以使跨度分成两行在那之后.如果我不初始化 min 和 max，我仍然会得到相同的结果，但它会扩展直到获得所有可用空间.– 莎拉·阿米尼

不幸的是，要覆盖此行为，您可以在单元格中添加一个额外的包装器，您可以在其中设置最小和最大宽度., 不要为表格本身设置宽度.然后它会根据 .

<块引用>

我在此单元格中放置了一个 div，并将我的文本放入其中.仍然为它设置了相同的额外填充.我主要需要消除那个该死的填充:D 为什么它首先发生?！

要将单元格缩小到最小宽度，您可以将 width:XX 设置为 tds，这里的宽度实际上表示表格单元格的最小宽度(记住它会扩展到内容大小)

在这种情况下，不要设置 table-layout:fixed; 单元格将首先(例如如果为空)为 XX 宽度并且可以扩展.它将能够增长，直到 div 达到它的 max-width.

下面是一个可能与您自己的结构不同的虚构示例......

表格，TD{边框:1px 实心；margin:1em auto;/* 不会影响 tds */}TD{宽度:50px；/* 等于最小宽度 */}td>div {/* 每个 div 可以通过类或 td:nth-child(x)> 设置不同的值格*/最大宽度:150px；溢出:隐藏；/* ?*/最小高度:1.2em；}/* 不都是一样的吗?*/td:nth-child(3) {宽度:100px；}td:nth-child(3) >div{最大宽度: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><表格><tr><td><div>LOREM Pixel BLBLUM

</td><td><div>LONGERPIECEOFCONTENT

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

There is a table in my page, with 5 columns overall. 3 of these columns have static width, and the rest of them have dynamic width based on their content. I've set max-width to 170px, and min-width to 50px. However, two strange thing happen: 1-

1. in inspect, I can see that min-width (when cell is empty) is 188px, and max-width(when any extra character will cause a break word) is 408px.
2. When span consists of a very small piece of texts, like just a word, it gets a considerable padding from left and right, but in inspect I see padding:0 for every direction.

I know that my span is not set to display:blockand its width is equal to the text inside it. So there must be something wrong with my column.

an instance of what happens can be seen in this picture.

Since I'm not sure which class or style caused this, I copied every style this dynamic column has received from inspect window, and put it here. I also marked those I thought would be relevant:

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

What I've tried by now:

• white-space : pre; Not only adds extra padding to left and right, but also to the other two directions, too. Couldn't test
• width:100; Although solves the extra padding issue, only lets the width to expand in inspect window, and prevents dynamic width in run time.
• Alternating span with a div and set display:inline; no difference. margin:zero, also no progress. Negative solves the problem for short spans, but lets longer spans to overflow the cell, which was predictable.

Any attempt to help will be highly appreciated. Thanks in advance.

edit: This is a jsFiddle which shows what happens. The padded one is the one which receive an extra padding from nowhere... or somewhere I can't see.

解决方案

Answer made from the earlier comments:

---

min and max-width are not efficient on table elements (or display:table family rules).

Basicly a table expands and shrinks according to its content. It cannot show a scrollbar unless you reset display and then you loose the table-layout properties. You can set a fixed width via table-layout:fixed and if no width set, columns might be spread evenly.

You can start to read this http://w3.org/wiki/CSS/Properties/table-layout to understand better how table behave.

well, I don't want my table cell to expand more than a specific width, and I had to set max-width to make span break into two lines after that. If I don't initialize min and max, still I get the same result, but it expands until it gets all free space available. – Sarah Amini

To override this behavior you can unfortunately add an extra wrapper in your cells to which you can set the min and max-width. , do not set a width to the table itself. It will size then according to the space used by the wrappers within .

I placed a div inside this cell, and put my text inside it. Still the same extra padding is set to it. I mostly need to eliminate that damn padding :D why does it occurs in the first place?!

to shrink the cells as much as min-width, you can set width:XX to tds, width here actually means min-width for a table-cell (remenber it expands to content size)

In that case , do not set table-layout:fixed; The cells will at first(if empty for instance) be XX width and can expand. It will be able to grow untill the div reach its max-width.

Below a made up example which might not be alike your own structure ....

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>

这篇关于表格列根据内容展开宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！