CODEWITHSUNDEEP
htmlcsshtml-table
chris01
chris01

Reputation: 12321

HTML/CSS: shrink a cell and its content

I have a table where one row is especially wide.

<table border=1>
 <tr><td>aaa</td><td>bbb</td></tr>
 <tr><td>aaa</td><td>bbb1234567890bbb</td></tr>
 <tr><td>aaa</td><td>bbb</td></tr>
</table>

I like to CUT the content of the long cell by CSS of td. I do not want to cut the content.

Setting max-width of the desired cell shrinks the cell but not the content. So the content overlaps the cell. 

<table border=1>
 <tr><td>aaa</td><td>bbb</td></tr>
 <tr><td>aaa</td><td style="max-width: 30px;">bbb1234567890bbb</td></tr>
 <tr><td>aaa</td><td>bbb</td></tr>
</table>

I want a shrinked cell and no overlapping (and also no word-wrapping).

Any idea how to do that?

Upvotes: 1

Views: 69

Answers (3)

Pete
Pete

Reputation: 58422

You need to set the overflow property on your td. You haven't said what you want to do with the overflow so I have shown three options:

  • overflow scroll
  • overflow hidden
  • overflow hidden by ellipsis

td {
  max-width: 30px;
  white-space: nowrap;
}

.with-overflow {
  overflow: auto;  /* adds scollbars if needed */
}

.without-overflow {
  overflow: hidden;  /* just hides any overflow */
}

.with-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;   /* just hides any overflow and appends ... to the end of the string */
}
<table border=1>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="with-overflow">adds scroll bars</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="without-overflow">without overflow</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="with-ellipsis">with ellispsis</td>
  </tr>
</table>

More information about overflow

More information about text-overflow

Upvotes: 1

John C
John C

Reputation: 26

I'm not sure if I understand you correctly. But I think that overflow: hidden along with text-overflow: ellipsis might solve your problem.

  td {
      max-width:100px;
      overflow: hidden;
      text-overflow:ellipsis;
  }

https://plnkr.co/edit/Gti1qhErZlTMjr8m7sIG?p=preview

Upvotes: 1

liakoyras
liakoyras

Reputation: 1185

Depending on what is the result you want to achieve, you can use

text-overflow: ellipsis;

or

text-overflow: clip;

so that the content will not overlap the cell.

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Upvotes: 2

Related Questions