HTML CSS How to stop a table cell from expanding

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.

Thanks for the advice, R.

How to prevent CSS table-cell content expanding to full height of row

How do I keep an item (toggle styled checkbox in my case) from expanding to the full height of a table cell. You can see my problem here: http://cdpn.io/scqev When my styled checkbox is the tallest t

CSS – Keep Table Cell from Expanding and Truncate Long Text

Can someone please tell me why this is not truncating the text? the last cell just keeps growing. I don’t want cells to grow beyond their allowed percentage. <HTML> <TABLE id=section1 width=

stop table cell from expanding, or set input to width of table cell

I have been playing around with this and cannot seem to get it functioning as I would like. here is my example, I have a table who’s cells i’m making editable by replacing their text content with inpu

Prevent a cell from expanding table height

I’m attempting to make an image take all the remaining width available for a table and span the entire height of a table without extending it any further, with overflow:auto to scroll if there’s not e

How to make an HTML vertifically fill a Table Cell with CSS?

How can I make an HTML <button> vertifically fill a Table Cell with CSS? I can use width:100% to make the button horizontally fill a Table Cell with CSS, but height:100% doesn’t do anything. For

how to remove particular cell from HTML table?

Suppose i have HTML table and i want to remove one cell from HTML table something like this : i have changed cell border color to white since the border color of whole table is black so it is showin

cocoa/osx – Stop NSTextView from expanding past its frame dimension

Does anyone know how to stop an NSTextView from expanding past the dimension of its frame when the text is added beyond those dimensions?

How to stop Maven from expanding env. variable w/Jenkins?

I’m familiar with Jenkins, but new to Maven, and I’m trying to figure out how to stop our Maven jobs in Jenkins from expanding an environment variable inside of the ApplicationContext.xml file. Inside

How do I stop HTML table from altering cell height when I dynamically add an image?

I’m trying to get an image to appear next to a select when an option is chosen. Unfortunately when the image is added in jolts the wholde table. I’ve tried altering paddings and heights and widths but

Table view cell expanding in IOS 7

I am developing an iOS application. I have used a table view. When the user clicks to any cell then the cell expands. But some cells are not expanding in iOS 7. Other versions run correctly. Below is

Answers

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>

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;

    }