HTML CSS How to stop a table cell from expanding

Question

I have a table which is built with the contents coming from a returned dataset. What I want to do is stop a \'description\' cell from expanding over 280px wide, no matter w

Answer 1

No javascript, just CSS. Works fine!

   .no-break-out {
      /* These are technically the same, but use both */
      overflow-wrap: break-word;
      word-wrap: break-word;

      -ms-word-break: break-all;
      /* This is the dangerous one in WebKit, as it breaks things wherever */
      word-break: break-all;
      /* Instead use this non-standard one: */
      word-break: break-word;

      /* Adds a hyphen where the word breaks, if supported (No Blink) */
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;

    }

Answer 2

Simply set the max-width attribute to 280px like this:

<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" max-width="280px" width="280px">

This will solve your problem.

Answer 3

<table border="1" width="183" style='table-layout:fixed'>
  <col width="67">
  <col width="75">
  <col width="41">
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Text</td>
    <td align="right">1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Abcdefg</td>
    <td align="right">123</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>Abcdefghijklmnop</td>
    <td align="right">123456</td>
  </tr>
</table>

I know it's old school, but give that a try, it works.

may also want to add this:

<style>
  td {overflow:hidden;}
</style>

Of course, you'd put this in a separate linked stylesheet, and not inline... wouldn't you ;)

Answer 4

It's entirely possible if your code has enough relative logic to work with.

Simply use the viewport units though for some the math may be a bit more complicated. I used this to prevent list items from bloating certain table columns with much longer text.

ol {max-width: 10vw; padding: 0; overflow: hidden;}

Apparently max-width on colgroup elements do not work which is pretty lame to be dependent entirely on child elements to control something on the parent.

Answer 5

This could be useful. Like another answer it is just CSS.

td {
    word-wrap: break-word;
}

Answer 6

To post Chris Dutrow's comment here as answer:

style="table-layout:fixed;" 

in the style of the table itself is what worked for me. Thanks Chris!

Full example:

<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
  <tbody>
    <td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">

     Your table content here

    </td>
  </tbody>
</table>