overflow scroll not working in table when using firefox

Question

I try to show a scrollbar in my table if the value of the cell is too long, i tried it with overflow but as you can see it does not work, there is no scrollbar, the word is displayed in it's full length

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

.test {
    overflow: scroll;
    color: red;
    max-width: 50px;
}

<table>
<tr>
  <th class="test">Filename</th>
  <th>value</th>
</tr>
<tr>
  <td class="test">Very long filename for demonstration</td>
  <td>Test</td>
</tr>
</table>

UPDATE:

I just noticed that the scrollbars are showing if i am using Chrome Browser, but not if i use Firefox. So unfortunatelly overflow does not seem to be compatible with firefox.

check stackoverflow.com/questions/9789723/… or stackoverflow.com/questions/509711/… — Gene R
– Gene R, Commented Feb 3, 2016 at 14:31
@LucaGiardina, oh mee too if i am using chrome, i just noticed that it does not work if use firefox — Black
– Black, Commented Feb 3, 2016 at 14:42
You can use a div within a td. I believe overflow works for div in firefox as shown in this post: stackoverflow.com/questions/16328233/… — Dr. Aaron Dishno
– Dr. Aaron Dishno, Commented Feb 3, 2016 at 14:52
Could you try using -moz-scrollbars-horizontalinside your .testrule? Should be the mozilla specific 'overflow' option. — Aer0
– Aer0, Commented Feb 5, 2016 at 8:13

Rounin · Accepted Answer · 2016-02-05 10:51:07Z

3

If you declare

.test {
display:inline-block;
white-space: nowrap;
overflow-x: scroll;
}

then the overflow:scroll will work in Firefox as well:

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

.test {
  color: red;
  display: inline-block;
  max-width: 50px;
  white-space: nowrap;
  overflow-x: scroll;
}

<table>
<tr>
  <th class="test">Filename</th>
  <th>value</th>
</tr>
<tr>
  <td class="test">Very long filename for demonstration</td>
  <td>Test</td>
</tr>
</table>

Version 2:

Main changes:

td has display: block; instead of display: inline-block;
td has overflow:auto; instead of overflow:scroll;

table, td {
  border: 1px solid black;
}

td {
  color: red;
  display: block;
  max-width: 120px;
  white-space: nowrap;
  overflow-x: auto;
}

<table>
<tr><td>account_requests</td></tr>
<tr><td>backend.template</td></tr>
<tr><td>firmware.host</td></tr>
<tr><td>frontend.template</td></tr>
<tr><td>license.host</td></tr>
<tr><td>licensing.host</td></tr>
<tr><td>mail.auto_smtp_authentification_password</td></tr>
</table>

edited Feb 5, 2016 at 10:51

answered Feb 3, 2016 at 15:06

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Black Over a year ago

Unfortunatelly this does not work properly as you can see in my screenshot. The scroll bar is showing even though the text is not oversized and the table looks weird. pasteall.org/pic/show.php?id=98793

Rounin Over a year ago

The setup in the image you link to above and the setup you posted in your original question seem quite different. I have added a Version 2 to the answer above.

Black Over a year ago

Thank you, but this did not really improved it for me, now it looks like this: pasteall.org/pic/show.php?id=98802

Rounin Over a year ago

Yes. I thought that's exactly what you are aiming for: I try to show a scrollbar in my table if the value of the cell is too long

Black Over a year ago

You are right sorry. But i mean it still looks weird, there are now white gaps between the rows for some unknown reason.

|

Collectives™ on Stack Overflow

overflow scroll not working in table when using firefox

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related