Table column expand width based on content

问题

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-

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

回答1:

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>

来源：https://stackoverflow.com/questions/45529911/table-column-expand-width-based-on-content

标签

html

css

width

column-width