CSS overflow property in table cells with firefox

Question

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 (ie 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

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

CSS overflow property in table cells with firefox

Question

1 answers

solution1
0 ACCPTED 2018-09-11 13:41:23

CSS overflow property in table cells with firefox

Question

1 answers

solution1 0 ACCPTED 2018-09-11 13:41:23

solution1
0 ACCPTED 2018-09-11 13:41:23