CSS overflow property in table cells with firefox
CSS overflow property in table cells with firefox
1.) This works in Chrome.
In Firefox, however, a django tables table that we are rendering on our site is not observing the overflow style. From what I read, table cell elements may be a "per browser" decision because they aren't pure block elements (if I am understanding the standard correctly), but here's a picture of my problem.
I've tried fussing with the max-width tag (to no effect other than the width changes but the overflow is still garbled into the next cell). I could technically wrap the line (white-space), but we don't want huge table rows on the page.
The Mozilla developer page (Overflow) says "In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap." The height property doesn't seem to change this either. No other CSS property I've tried seems to have an effect.
I keep thinking that this is something Firefox may not support (i.e. table cells aren't "block-level"?), but I can't quite say that for certain.
EDIT: Here's the html. It's just a basic table produced by django tables. Please ignore the inline style I attempted which is commented out.
EDIT: Here's inline code and a JSFiddle link at the bottom.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<style>
<body font-family: Arial, Helvetica, sans-serif;
th
padding: 8px;
td
padding: 8px;
td.content
overflow-x: scroll;
max-width: 0;
white-space: nowrap;
</style>
</head>
<body>
<table>
<thead><th>Column 1</th><th>Column 2</th><th>Column 3</th></thead>
<tbody>
<tr><td>Other stuff</td><td class="content">A REALLY REALLY REALLY
REALLY LONG MESSAGE</td><td>Other stuff</td></tr>
</tbody>
</table>
</html>
JSFiddle
can you show us the html and css code with snippet?
– David Leonardo Molina Ruiz Dav
Sep 11 '18 at 13:23
I highlighted the relevant css in the picture but I'll add the html code for posterity.
– Kevin Hirst
Sep 11 '18 at 13:26
You need to take html, css and js in question and make them into a snippet that we can interact with. Images of code are mostly useless.
– Serg Chernata
Sep 11 '18 at 13:37
Alright, I have a link to a jsfiddle now, it exhibits the same problem. Works in Chrome, not in Firefox.
– Kevin Hirst
Sep 11 '18 at 13:48
1 Answer
1
I made a simple code for you, i hope help you, tell me if this is what you want:
.msg_list
border:1px solid red;
.td-content
border:1px solid blue;
max-height:100px;
max-width:100px;
.content
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
.content div
width:200px;
<table class="msg_list">
<thead>
</thead>
<tbody>
<tr>
<td class="td-content">
<div class="content">
<div>One really really really really really long message</div>
</div>
</td>
</tr>
</tbody>
</table>
If you watch you can see in the css the class .content and his property max-width, i tested it in firefox, you can try it
I appreciate that, what I was looking for was one line of text with a scroll bar along the bottom using the css overflow property.
– Kevin Hirst
Sep 11 '18 at 13:47
oh ok sorry, let me edit it, give me some minutes
– David Leonardo Molina Ruiz Dav
Sep 11 '18 at 13:48
Ready, can you check it now
– David Leonardo Molina Ruiz Dav
Sep 11 '18 at 14:58
This works, in terms of css, and you couldn't have known that it is more difficult to get the table to render div tags within cells as part of django tables. But I can do that with jquery, I suppose, although it's not ideal. I will accept this answer.
– Kevin Hirst
Sep 11 '18 at 16:24
Also, only need the outer div tag in the cell.
– Kevin Hirst
Sep 11 '18 at 16:24
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
If it's not readily evident, I want there to be a scroll bar there.
– Kevin Hirst
Sep 11 '18 at 13:20