使用Firefox在表格单元格中的CSS溢出属性

Question

1.）在Chrome中有效。

但是，在Firefox中，我们在网站上呈现的django表格表未观察到溢出样式。 根据我的阅读，表单元格元素可能是“每个浏览器”的决定，因为它们不是纯粹的块元素（如果我正确理解标准的话），但这是我的问题的图片。

我已经尝试过对max-width标签大惊小怪（除宽度变化外没有其他影响，但下一个单元格中的溢出仍然是乱码）。 从技术上讲，我可以将行换行（空格），但是我们不希望页面上有巨大的表格行。

Mozilla开发人员页面（ Overflow ）表示：“为了使溢出生效，块级容器必须设置为nowrap的设置高度（高度或最大高度）或空白。” height属性似乎也没有改变。 我尝试过的其他CSS属性似乎没有效果。

我一直在想这可能是Firefox不支持的（即表单元格不是“块级”吗？），但是我不能肯定地说。

编辑：这是html。 它只是Django表生成的基本表。 请忽略被注释掉的我尝试的内联样式。

编辑：这是内联代码和底部的JSFiddle链接。

<!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

我为您编写了一个简单的代码，希望对您有所帮助，告诉我这是否是您想要的：

 .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>

如果您看到在CSS中可以看到类.content及其属性max-width ，我在firefox中对其进行了测试，则可以尝试

使用Firefox在表格单元格中的CSS溢出属性

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-09-11 13:41:23

使用Firefox在表格单元格中的CSS溢出属性

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-09-11 13:41:23

解决方案1
0 已采纳 2018-09-11 13:41:23