之前的项目做过这种需求，但是由于不是自己亲手实现，所以以为只要使用 text-overflow 就可以实现这个需求了。但实事证明并没有那么简单。下面就把这个需求的实现要点理一下。
先说一下几个要点：
- table 的 “table-layout”属性要声明为“fixed”
- 对表格的第一行中的每个单元格设置宽度。我用的是数值，不是百分比。
- 对可能出现内容很长的单元格，设置以下三个属性：
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
好了，就这么多了。下面上代码 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.dataTable {
width: 100%;
border: none;
border-collapse: collapse;
border-spacing: 0px !important;
display: table;
table-layout:fixed;
}
.dataTable th,.dataTable td {
padding: 0px;
margin: 0px;
border: 1px solid #BEBFD3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#col1 {
width: 70px;
}
#col2 {
width: 220px;
}
#col3 {
width: 300px;
}
#col4 {
width: 180px;
}
</style>
<body>
<table class="dataTable">
<thead>
<tr>
<th id="col1">Header1</th>
<th id="col2">Header2></th>
<th id="col3">Header3</th>
<th id="col4">Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>content1</td>
<td>content2content2content2content2content2content2content2content2content2content2content2content2content2content2content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3content3content3content3content3content3content3content3content3content3content3content3content3content3content3</td>
<td>content4</td>
</tr>
</tbody>
</table>
</body>
</html>
代码见附件，可以运行看看效果。
另外，如果想在页面放大缩小的过程中，保持某几个列的宽度不变，其他列的宽度自动进行计算的话，可以采用以下的方案：
.col1{
width: 60%;
}
.col2{
width: 40%;
}
.col13{
width: 200px;
}
以上表示， 表格共有三列，其中，第三列的宽度被固定为了 200px，所以在表格放大缩小的过程中，它的宽度始终保持为 200px，但是表格剩下的宽度将被分配给第一列和第二列，这两列将以 3：2 的比例瓜分剩下的宽度 。
打个比方，表格在放大或者 缩小 之后，它的的宽度 为300px，那么这个时候，表格的三列的宽度将分别为：
60px 40px 200px
相关推荐
在 SWT 的 Table 控件中，默认情况下并不支持自动换行。为了实现在 TableItem 内部显示多行文本的效果，我们需要自定义监听器来处理相关的事件，例如 MeasureItem、PaintItem 和 EraseItem 事件。下面我们将详细解释...
默认情况下，`QTableView`中的单元格内容是不支持自动换行的，而是将文本截断或者显示省略号。要实现内容自动换行，我们可以利用Qt的代理（Delegate）机制来定制单元格的行为。本文将详细讲解如何通过自定义代理实现...
layui数据表格自动换行，当设置固定列时，会出现行高不一致的问题，用户体验不好，只需要在页面中增加几行代码即可解决。
在layui的表格组件中，有时我们需要实现单元格的合并，比如跨行或跨列的合并，以展示更复杂的数据结构或者优化视觉效果。"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的...
在处理`JTable`时，我们有时需要使其单元格内容支持自动换行，以便更好地显示长文本。标题“JTable自动换行”正是指向这个功能，即如何在`JTable`的单元格内实现文本的自动换行。 默认情况下，`JTable`的单元格使用...
总之，`jquery.table.rowspan.js`插件为前端开发提供了便利，使得在表格中实现单元格自动合并变得更加简单。它适用于需要动态展示和更新数据的场景，且无需频繁地与服务器交互。通过理解和掌握这个插件，开发者能够...
这样，即使单元格宽度有限，内容也能被完整显示在单元格内。 在代码示例中，通过设置table的`style="table-layout:fixed;"`以及td的`style="word-wrap:break-word;"`，就能够实现内容在单元格宽度限制下的自动换行...
单元格自动换行问题是 Web 开发中常见的问题，特别是在表格中显示大量文字时，超长文本可能会溢出单元格，影响页面的美观和可读性。使用 `<wbr>` 标签可以解决这个问题，但是这只是一个临时的解决方案，并不能满足...
在这个“vue-easytable合并单元格”的主题下，我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中，合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成，但在Vue Easytable...
在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性，允许用户在导出表格时，将具有相同内容的单元格进行合并，以提高数据的可读性和美观性。 1. **Bootstrap Table简介** Bootstrap Table是一...
`可以使单元格内的内容在单词边界处换行，避免溢出。`table-layout: fixed;`可以让表格根据预先设定的列宽分配空间，避免内容过长导致的换行。 3. **Linux命令**：如`ls`用于列出目录内容，`cd`用于切换目录，`grep...
2. **行内换行**：在表格的单元格内，有时需要实现文本的换行，这在默认情况下可能不被支持。PHPWord通过设置单元格的宽度和使用`<w:br/>`标签可以实现这一功能。开发者可以通过自定义`cellStyle`来控制换行行为，...
自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行 ...
aspose.words 控件可以方便的出来word文档，通过在word模板中定义书签，可以在指定的位置插入内容，如果需要在word中插入表格，并且表格中含有多行行头，需要合并单元时，就稍微麻烦一些，必须要注意设置单元格的...
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
使用layu数据表格i的时候，文字太多会使用……代替，用户体验不好，只需要在页面中增加几行样式文件即可解决。
这将解决长串英文字母不能自动换行的问题和 TD 中汉字自动换行问题。 总结 在这里，我们讨论了如何使用 CSS 来控制 TD 中的换行。我们学习了强制不换行和强制换行的实现方法，并介绍了相关的属性和实例。
在跨浏览器兼容性方面，需要注意`word-break`属性在某些浏览器（如Opera和Firefox）中可能不受支持，这时可以使用`white-space:normal`来替代，以确保在多种浏览器下的正常换行。然而，单纯使用空格来代替单词间的...