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 个答案: