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 http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell or http://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td — Gene R, Feb 03 '16 at 14:31
@LucaGiardina, oh mee too if i am using chrome, i just noticed that it does not work if use firefox — Black, Feb 03 '16 at 14:42
You can use a div within a td. I believe overflow works for div in firefox as shown in this post: http://stackoverflow.com/questions/16328233/overflow-auto-does-not-work-in-firefox — Dr. Aaron Dishno, Feb 03 '16 at 14:52
Could you try using `-moz-scrollbars-horizontal`inside your `.test`rule? Should be the mozilla specific 'overflow' option. — Aer0, Feb 05 '16 at 08:13

Rounin · Accepted Answer · 2016-02-05T10:51:07.153

2

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 05 '16 at 10:51

answered Feb 03 '16 at 15:06

Rounin

27,134
9
83
108

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. http://www.pasteall.org/pic/show.php?id=98793 – Black Feb 05 '16 at 07:47
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. – Rounin Feb 05 '16 at 10:53
Thank you, but this did not really improved it for me, now it looks like this: http://www.pasteall.org/pic/show.php?id=98802 – Black Feb 05 '16 at 12:37
1

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_ – Rounin Feb 05 '16 at 12:40
You are right sorry. But i mean it still looks weird, there are now white gaps between the rows for some unknown reason. – Black Feb 05 '16 at 12:49
Come on, be fair. You asked a specific question with a specific setup. I showed you a viable solution to achieve what you wanted with that setup. You then indicated that didn't work with a different setup. I then showed you a viable solution to achieve what you wanted with that different setup. Now you are asking about something completely different. Please accept the answer and ask another question. I'm happy to help you, but questions must be discrete and self-contained. Thanks. – Rounin Feb 05 '16 at 12:52
It was not different, the table in my screenshot only had a few more rows.. It does not work exactly as it works in google chrome,, just look at the screenshot how messed the table looks, would you accpet this as a solution? – Black Feb 05 '16 at 13:04
Please run the **Version 2** code snippet in the post above again and let me know if what you see is or is not the desired behaviour you asked about in your original question. It is (to my understanding) and frankly, I'm pretty pleased with it. If it's not what you're looking for I'm happy to leave it for future searchers and move on to other questions. If it is what you were originally looking for please accept the answer - and if you still have other things to fix, please ask another question. – Rounin Feb 05 '16 at 13:18

overflow scroll not working in table when using firefox

1 Answers1