css2 table-layout学习

参考文档

问题来源

在做移动app的时候想用表格显示内容，每列的宽度非常的有限，因此想用单行省略的效果来显示内容，我发现无论我怎么调整样式，界面都是全部显示每行的内容，查询了一些成功的案例，知道要给table添加table-layout样式

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .one-line-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	width: 100px
  }
</style>
<body>
<table  style="width:200px;table-layout: fixed;">
  <tr>
    <td >位置</td>
    <td >描述</td>
  </tr>
  <tr>
    <td style="">我会往下挤我会往下挤我会往下挤我会往下挤我会往下挤</td>
    <td style="" class="one-line-ellipsis">描述描述描述描述描述描述描述描述描述描述描述描述</td>
  </tr>
</table>
</body>
</html>

注意事项

table标签要添加width:200px;table-layout: fixed;,宽度和布局样式一个都不能少
设置其中一个td的宽度，剩下的宽度就是总的宽度减去明确的宽度

效果

知识点

fixed：固定表格布局

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

如果指定了单元格的宽度，则会按指定的宽度限定每个单元格宽度，跟内容无关（如果指定的是比例，会永远保持这个比例），这样就可能出现内容飘到单元格之外的情况。
如果没有指定单元格的宽度，则会根据table的总宽度平分到每个单元格。

auto：自动表格布局

在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

自动表格布局时，设置单元格的宽度是没有效的。