当你准备全面进军web标准时，有时候你是不是被表格的弄得焦头烂额呢？比如，原来使用“非法”的nobr现在要用什么来代替呢？今天，就让我来一个终极解决方案。
或许你已经Google到white-space： nowrap可以实现nobr，不错，但关键还有一个，那就是table-layout. table-layout有两个值可以设定，预设的是auto. auto： 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢。
fixed ： 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。
为了让表格布局固定住，我们需要table-layout：fixed.假设没有fixed，把你的分辨率减小到一定程度，你会发现white-space： nowrap是不会生效的。
技巧：为了使表格能够适应液态布局（liquid layout，即可伸缩性），不建议你为表格设置绝对宽度，使用相对宽度如百分比是不错的选择。另外，把宽度相对固定的内容（比如时间格式）格设置绝对宽度，非固定的内容格不设置任何宽度，只需给予其设置white-space： nowrap，虽然在小分辨率的情况下会溢出，但依据某些观点看来，这比折行更美观。
当然我的观点不这样，如果是属于我自己能控制的东西，我是不会要white-space： nowrap的，让用户能够清晰地看到内容，我认为比美观更重要。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<table border=1 width=300 cellpadding="5" cellspacing="1" style="table-layout:fixed">
<tr>
<td nowrap style="overflow:hidden; text-overflow:ellipsis;">中华人民共和国中华人民共和国中华人民共和国</td>
<td nowrap style="overflow:hidden; text-overflow:ellipsis;">中华人民共和国中华人民共和国中华人民共和国</td>
<td nowrap style="overflow:hidden; text-overflow:ellipsis;">中华人民共和国中华人民共和国中华人民共和国</td>
</tr>
</table>
<br/>
<table width="550" border="0" cellpadding="5" cellspacing="1" bgcolor="#007373" style="table-layout:fixed">
<tr>
<th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List1</th>
<th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List2</th>
<th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List3</th>
</tr>
<tr>
<td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;" title="用CSS实现超长字段被省略的简单方法用CSS实现超长字段被省略的简单方法">用CSS实现超长字段被省略的简单方法</td>
<td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;" title="用CSS实现超长字段被省略的简单方法用CSS实现超长字段被省略的简单方法">用CSS实现超长字段被省略的简单方法</td>
<td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;" title="用CSS实现超长字段被省略的简单方法用CSS实现超长字段被省略的简单方法">用CSS实现超长字段被省略的简单方法</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效，下面有详细的解决方法，大家可以学习学习
table-layout:fixed; } ***本文关键词：table-layout属性值、定义和用法、固定表格布局、自动表格布局。 1定义和用法 tableLayout属性用来显示表格单元格、行、列的算法规则。 ①该属性指定了完成表布局时所用...
为了让表格能够填充屏幕(剩余空白区域)，常将其宽度属性定义为：100%，单元格也是用百分数来定义。 但这样就会出现问题： 如果单元格中的文本超过宽度限制，就会自动换行，高度自动增高，导致整个表格的样式...
datagrid 与gridview的区别
这是可以在任何地方使用的实用程序类库。....u-table--fixed { table-layout : fixed ; } .u-text--center { text-align : center ; } .u-vertical--middle { vertical-align : middle ; } .u-widt
1.主要利用table style的 layout=fixed属性按照当前表头再copy一个table,显示在当前datagrid或gridview的前面. 2.注意:调用的时候,datagrid 或gridview 要有style="table-layout:fixed" 和 width=?? 属性.
Isn’t table layout something web designers want to avoid?...Table sizing—determine table width by using either a fixed- or automatic-width layout, and learn how heights are calculated
<title>ASP简易留言板--ASP simple postboard v1.21 A:link,A:active,A:visited{TEXT-DECORATION:...td { table-layout:fixed; word-break :break-all; font-family:"宋体"; font-size: 12px; line-height: 15px; }
经过大牛修改后的core-renderer.jar，当把HTML转化成PDF时支持table的td中的中文、英文和数字自动换行，table必须添加样式table-layout:fixed;word-break:break-strict;
一般是使用样式：table-layout:fixed。不过在Firefox下面，会有一些问题，参考Gmail的一些做法，做了几个测试，得出 一种解决办法。 如果想要一个table固定大小，里面的文字强制换行(尤其是在一长串英文文本，并且...
Flying Saucer生成pdf文档jar包 ，已做修改，支持中文 换行，但是 table标签换行 请改用CSS 样式：style="table-layout:fixed; word-break:break-strict;
设置table 的 style=table-layout:fixed; 然后设置td的 style=word-wrap:break-word; 即可 复制代码代码如下:<table xss=removed border=”1″ cellspacing=”0″ cellpadding=”0″ width=”200″> <tbody> <tr> ”...
1.样式一 圆角表格代码如下： <TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="45%" border=0> <TBODY>
该文件是主要针对Linux平台gtk+-2.0的界面编程，主要是针对界面的布局控件( Alignment/Table/Fixed ) ，每钟布局控件都有一个源码示例，代码注释详细。 编译：gcc gtk_table.c `pkg-config --cflags --libs gtk+-2.0...
qq论坛源码，含图标，* 基本定义 */ td,body { font-size:12px line-height:20px color:#222222 } ul,li,form,img {margin:0 padding:0 list...TABLE.TableFixed { table-layout:fixed } XMP { display:none }
要让table的宽度固定我们可以给table元素设置table-layout:fixed;样式，但这样表格的宽度问题是解决了，但是里面的内容并不会自动换行。我们还需要给td设置word-break: break-all; word-wrap:break-word;即可完美...
table-layout: fixed; } .autocut{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -
} table{ table-layout:fixed; empty-cells:show; border-collapse: collapse; margin:0 auto; } td{ height:30px; } h1,h2,h3{ font-size:12px; margin:0; padding:0; } .table{ border:1px solid #ca