HTML CSS How to stop a table cell from expanding-ThrowExceptions

Exception or error:

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 what the content length (its s string). I have tried:

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

But this doesn’t seem to work. I don’t want it to wrap, nor do I want anything over 280px to be displayed.

How to solve:

It appears that your HTML syntax is incorrect for the table cell. Before you try the other idea below, confirm if this works or not… You can also try adding this to your table itself: table-layout:fixed.. .

<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;">
   [content]
</td>

New HTML

<td>
   <div class="MyClass"">
       [content]
   </div>
</td>

CSS Class:

.MyClass{
   height: 280px; 
   width: 456px; 
   overflow: hidden;
   white-space: nowrap;
}

###

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

###

You can’t control the width of a table-cell (td) unless you wrap its contents inside a container control like div. The following jQuery function will wrap the contents of each td inside a div.

function WrapTableCellsWithDiv(tableId)
{
    $('#' + tableId + ' tbody tr td').each(function ()
    {
        //get corresponding th of this td
        var tdIndex = $(this).index();
        var th = $('#' + tableId + ' thead tr th:nth-child(' + (tdIndex + 1) + ')');
        var thWidth = $(th).width();

        //wrap the contents of td inside a div
        var tdContents = $(this).html();
        var divTag = '<div style="width: ' + thWidth + '">' + tdContents + '</div>';
        $(this).html(divTag);
    });
}

This function will wrap the contents of each td element inside a div tag. The width of the div tag will be set to width of the corresponding th element.

Sample table structure:

<table id="SampleTable">
    <thead>
        <tr>
            <th style="width: 90px;">FirstName</th>
            <th style="width: 90px;">LastName</th>
            <th style="width: 60px;">Age</th>
            <th style="width: 70px;">Gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Smith</td>
            <td>25</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Ted</td>
            <td>Eddie</td>
            <td>22</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Angel</td>
            <td>Mike</td>
            <td>23</td>
            <td>Female</td>
        </tr>
    </tbody>
</table>

###

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;

    }

###

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>

###

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

td {
    word-wrap: break-word;
}

###

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.

###

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.

Leave a Reply

Your email address will not be published. Required fields are marked *