用到div包裹table的布局，想要的效果是table的宽度等于div宽度，超出内容省略号显示。
听起来很简单啊，设置table宽度为100%，省略号三行代码往上一粘，心想着大功告成。
but！！！！页面效果发现其中一行数据较长，导致table其实是超出了父级div。

查资料后发现原来table有不一样的默认样式 table-layout ，它的值是这样的：

所以可以知道其实手动给table设置的width: 100%是没用的，table的值是受到了列宽的影响，而列宽又因内容决定，所以就是table的宽度受到内容影响了。

so，改成不受内容影响的就好咯。

table {
      table-layout: fixed;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
div中table的宽度超过div的宽度问题
table 如何不越过父级div
                    用到div包裹table的布局，想要的效果是table的宽度等于div宽度，超出内容省略号显示。听起来很简单啊，设置table宽度为100%，省略号三行代码往上一粘，心想着大功告成。but！！！！页面效果发现其中一行数据较长，导致table其实是超出了父级div。原因查资料后发现原来table有不一样的默认样式table-layout，它的值是这样的：值描述autom...
				
自动换行问题，正常字符的换行是比较合理的，而连续的数字和英文字符常常将容器撑大，挺让人头疼，在52CSS.com中不乏这方面的文章，现在总结一下CSS如何实现换行的方法，只要在CSS中定义了如下句子，可保网页不会再被撑开了。
　　对于div,p等块级元素
　　正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
				
固定宽度div中有一个table,table设置宽度100%，但是发现table中的内容有一部分被隐藏掉了，实际内容宽度超过了div的宽度
实际效果图：表格内容超出了div的宽度，但是超出部分是被隐藏的
期望效果图：
表格关键部分
<table cellpadding="0" cellspacing="0" border="0" width="100%" bordercolor="#000000" style="border-collapse: collapse;" id="mTable">
实际是把表格写在了 redio 里面
问题： table 在 div 里面，想要的效果是如果 table 的内容超出了父元素就显示省略号，再把 table 的宽度设置为100%，但是，最后数据比较长还是超出了父元素
原因： table 是有不一样的默认样式 table-layout
				
在element-ui中，el-table组件会自动根据表格内容自适应列宽，如果内容过长则会省略部分内容并显示省略号。如果你想要手动设置列宽，可以使用`:width`属性来设置列宽，例如：
```html
<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" :width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" :width="80"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>
如果你想要自动计算列宽，可以使用以下方法：
1. 设置`:width`为`auto`，这样列宽就会根据内容自适应。
```html
<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" :width="auto"></el-table-column>
  <el-table-column prop="age" label="年龄" :width="auto"></el-table-column>
  <el-table-column prop="address" label="地址" :width="auto"></el-table-column>
</el-table>
2. 使用CSS样式来计算列宽，例如：
```html
<el-table :data="tableData" class="my-table">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```css
.my-table .el-table__body-wrapper {
  display: flex;
  flex-direction: column;
.my-table .el-table__body-wrapper .el-table__row {
  display: flex;
.my-table .el-table__body-wrapper .el-table__cell {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
这段CSS代码会将表格行和单元格都设置为`flex`布局，并且使用`flex: 1`来平均分配每个单元格的宽度。同时，`white-space: nowrap`可以防止单元格换行，`overflow: hidden`可以隐藏超出部分，`text-overflow: ellipsis`可以在超出部分处显示省略号。
通过这两种方法，你就可以自动计算列宽并显示省略号了。