今天在改网站后台的一个表格,里面有个MD5字段,由于页面宽度有限,表格需要换行。于是我给单元格加了如下的规则:

word-wrap: break-word;
width: 120px;

 结果IE里是好的:

Firefox中没有任何变化:

后来发现需要给表格(table)元素加个属性:

table-layout: fixed;

 现在,Firefox下,表格的单元格就可以自动换行了,不过和IE的效果还是稍微有点差别,有些细节的兼容问题避免不了:

table-layout属性在W3C的说明中如下:

The table-layout property controls the algorithm used to lay out the table cells, rows, and columns.

Values auto | fixed | inherit
Initial value auto
Applies to 'table' and 'inline-table' elements
Inherited No
  • auto
    Use any automatic table layout algorithm.
  • fixed
    Use the fixed table layout algorithm.
  • inherit
    Takes the same specified value as the property for the element's parent.