Why Does Overflow:Hidden Not Work in a ≪Td≫

Why does overflow:hidden not work in a td?

Here is the same problem.

You need to set table-layout:fixed and a suitable width on the table element, as well as overflow:hidden and white-space: nowrap on the table cells.

Examples

Fixed width columns

The width of the table has to be the same (or smaller) than the fixed width cell(s).

With one fixed width column:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

overflow:hidden not working when using tables

Overflow only works on block level elements. Table elements aren't block elements. If you want to get those effects put a <div> inside the table cell and apply the effects to the <div>.

td.scroll div {
  background-color: #00FFFF;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

td.hidden div {
  background-color: #00FF00;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

with:

<table width="100%">
<tr>
  <td><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
  <td><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
  <td><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
</tr>

<tr>
  <td class="scroll"><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
  <td class="scroll"><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
  <td class="scroll"><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
</tr>

<tr>
  <td class="hidden"><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
  <td class="hidden"><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
  <td class="hidden"><div>Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫Why Does Overflow:Hidden Not Work in a ≪Td≫aa</div></td>
</tr>
</table>

overflow:hidden doesn't work inside a table

You need to set style with table-layout:fixed; along with overflow:hidden; on the table element.

How can I hide overflow in a td?

The default behaviour is just to wrap the text, since height is no issue! You can disable text wrapping, though, with white-space: nowrap.

Because tables are a bit of a special case, however, you then need to use max-width instead of width (which is just a “preferred width”). Here’s your updated jsFiddle.

td {
    border: 1px solid rgb(0,0,0);
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

overflow:hidden not working in colgroups for very long cells

Use word-wrap: break-all instead:

.mytable {  table-layout: fixed;  width: 1000px;}
th,td {  padding: 5px;  word-break: break-all;}
.ten {  width: 100px;  overflow: hidden;}
.others {  font-size: 13px;}

<table border=1 class="mytable">
  <colgroup>    <col class="ten" />    <col class="others" />    <col class="others" />    <col class="others" />    <col class="others" />    <col class="others" />    <col class="others" />    <col class="others" />    <col class="others" />    <col class="others" />    <col class="others" />  </colgroup>
  <thead>    <tr>      <th>VERY LONG COLUMN</th>      <th>A</th>      <th>B</th>      <th>C</th>      <th>D</th>      <th>E</th>      <th>F</th>      <th>G</th>      <th>H</th>      <th>I</th>      <th>J</th>
    </tr>  </thead>  <tbody>    <tr>      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>      <td>not so long</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>    </tr>    <tr>      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>      <td>not so long</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>    </tr>    <tr>      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>      <td>not so long</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>    </tr>    <tr>      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>      <td>not so long</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>    </tr>    <tr>      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>      <td>not so long</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>      <td>small</td>    </tr>  </tbody></table>

Overflow: hidden not working when TD, and TH width are specified

You just needed to get rid of the white-space here

table td > div {
   overflow: hidden;
   white-space: nowrap;
}

and I added colgroups. They are better for setting widths in your columns and avoid issues

DEMO

tbody overflow hidden not working

There is no easy way to do this because tables are formatted so as to display all the content, which means that table-cell widths and heights are adjusted to show the content, which also means that the table height and width will adjust accordingly. Any specified width and height tend to be treated as minimum values.

To get the effect that you want, you need to use two tables as shown below.

You place the headers in one table and the data in the second. Both tables have the same width and you need to make sure all the table-cells have the same width and use table-display: fixed.

Around the second table (for data), wrap a block level div with the scrolling enabled.

Note: There is at least one jQuery plug-in that deals with sticky table headers, see for example, http://www.fixedheadertable.com

Also, table-sort will not work in this two-table layout without some extra programming.

There is a jQuery plugin that seems to have both sorting and sticky headers:

http://mottie.github.io/tablesorter/docs/index.html

but you would need to try it out.

.fruitcrateTable {    border: 1px dotted blue;    width: 520px;}.fruitcrateTable table {    width: 500px;    table-layout: fixed;}.fruitcrateTable table th, .fruitcrateTable table td {    width: 15%;    border: 1px dotted gray;}.fruitcrateTable .table-body-scroll {    height: 300px;    overflow-y: auto;    /* Trigger vertical scroll    */    overflow-x: hidden;  /* Hide the horizontal scroll */}

<div class="fruitcrateTable"><table class="header-table">    <thead>        <tr>            <th class="header">Column1</th>            <th class="header">Column2</th>            <th class="header">Column3</th>            <th class="header">Column4</th>            <th class="header">Column5</th>            <th class="header">Column6</th>            <th class="header">Column7</th>        </tr>    </thead></table><div class="table-body-scroll">        <table>            <tbody>                <tr>                    <td>0</td>                    <td>Calculate1</td>                    <td>Calculate1</td>                    <td>Calculate1</td>                    <td>Calculate1</td>                    <td>Calculate1</td>                    <td>Calculate1</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>                <tr>                    <td>0</td>                    <td>Calculate2</td>                </tr>            </tbody>        </table>    </div></div>

text-overflow: ellipsis is not working in table

It happens because of the display property in table. You need to give a display: block to make ellipsis work, but it kind of removes how tables should work.

The better thing would be to wrap your td contents inside a div
and change your CSS.

Option 2 would be using max-width to your td`.

<td width="50px">
  <div>Hello World</div>
</td>

CSS to:

td>div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50px
}

OR Just add max-width

.container {
  display: flex;
  flex-direction: row;
}

p,
td>div,td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;
}

<div class="container" style="width:100px; background-color: red">
  <p width="50px">
    Hello world
  </p>
  <p width="50px">
    Hello world
  </p>
</div>

<table style="background-color: green">
  <tr width="100px">
    <td width="50px">
      <div>

        Hello World</div>
    </td>
    <td width="50px">
      <div>

        Hello World</div>
    </td>
    <td width="50px">
      Hello World
    </td>
  </tr>
</table>

Why Does Overflow:Hidden Not Work in a ≪Td≫