当你准备全面进军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>
分享到：
相关推荐
在实施解决方案时，还需注意一些细节问题，例如确保CSS中table-layout属性设置为fixed，并且表格宽度也被适当地指定，以便于固定布局的生效。同时，当使用col标签指定宽度时，也需要在相应的col标签中明确指定width...
"固定table宽度 table-layout: fixed" 是一个CSS属性，用于解决这个问题，确保表格在不同场景下保持一致的列宽。 首先，让我们了解一下表格布局的默认模式——"auto"布局。在默认情况下，表格的列宽会根据其内容的...
table-layout:fixed; } ***本文关键词：table-layout属性值、定义和用法、固定表格布局、自动表格布局。 1定义和用法 tableLayout属性用来显示表格单元格、行、列的算法规则。 ①该属性指定了完成表布局时所用...
`table-layout`属性有两个可选值：`auto`和`fixed`，它们分别代表自动表格布局和固定表格布局。 1. **自动表格布局（`auto`）**： 默认情况下，表格使用自动布局。在自动模式下，列宽由列中最宽的内容决定，即使...
本文将详细介绍如何通过CSS样式实现这一功能，同时结合`table-layout`属性来优化表格的布局性能。 首先，`table-layout`属性是CSS中用于设定表格布局算法的关键。默认情况下，表格布局(`table-layout: auto`)会根据...
<table class="table table-bordered" style='table-layout:fixed;'> ``` `table-layout: fixed;` 指定表格的列宽由列定义决定，而不是由内容自动调整。这样，当内容超过列宽时，应用的CSS样式就能正常工作，呈现...
- **易用性**：GridView拥有更直观的属性和方法，使得配置和定制变得更加简单。 - **内置功能**：内置了排序、分页、编辑、删除等功能，无需额外编程即可实现基本的CRUD操作。 - **模板化**：类似DataGrid，...
<table style="table-layout: fixed; word-break: break-all;"> <td style="background-color: #eeeeee;"> <!-- 这里放置大量的文本 --> document.write(new Array(100).join("d")); </table> ``` - *...
首先，为了让表格的宽度固定，可以使用CSS属性`table-layout: fixed;`。这个属性用于定义表格宽度的计算方式。当设置为`fixed`时，表格的宽度由表格的第一个行的列宽决定，这样可以确保表格宽度不会因为内容的多少而...
首先，利用`table-layout:fixed`属性，可以固定表格布局，使得表格列宽不再根据内容自动调整，这样有利于我们后续对表头和数据部分进行独立处理。同时，给Datagrid或GridView添加`width`属性，以确保其宽度设定。 ...
通过以上对CSS属性的详细解析及应用实例的介绍，我们可以看出，合理利用`table-layout`、`word-break`和`word-wrap`等CSS属性，能够有效改善表格内文本的显示效果，尤其是在需要处理大量文本数据的情况下，自动换行...
- 需要注意的是，为了使`table-cell`生效，父容器需要设置为`display: table`并且`table-layout`属性需要设置为`fixed`。 2. **右侧定宽，左侧自适应布局**： - 这种布局与左侧定宽类似，只是定宽的位置发生了...
对于`table`元素，IE浏览器可以使用`table-layout: fixed;`配合`word-break`或`word-wrap`来控制内容换行和隐藏多余内容。例如： ```html <table style="table-layout:fixed" width="200"> <td>...
总结来说，当遇到`table`中的`td`无法对齐的问题时，可以尝试将`table`的`table-layout`属性设置为`fixed`。这种方法能够确保表格单元格的宽度一致，提高跨浏览器的兼容性和一致性。不过，需要注意的是，`table-...
- `table-layout`属性控制表格的布局算法。`fixed`值可使表格宽度固定，所有列宽会根据第一行的列宽自动调整；而`auto`则是默认值，列宽根据内容自适应。 2. **边框合并** - `border-collapse`属性决定表格单元格...
* 应用元素的动画，使用position属性的fixed值或absolute值 * 避免使用table布局，table中每个元素的大小以及内容的改动，都会导致整个table的重新计算 * 对于那些复杂的动画，对其设置position: fixed/absolute，尽...