关于table设置宽度无效的解决方法

• 首先要知道table-layout属性值有哪些？

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

当属性值为automatic时候，宽度通过设置样式不一定起作用的，它的宽度取决于单元格内容。
当属性值为fixed时候，列宽由表格宽度和列宽设定，但是问题就在这里。是不是好多人在给table设置table-layout：fixed之后，给td设置宽度不起作用，看到效果仍然是所有单元格均分。
那么，怎么解决呢？

• 下面分享一个可行的解决方案：

• 在tbody之前有多少列就加多少个col标签，通过给col设置样式，就可以实现表格实际宽度是你设置的宽度。

				<table border="1" key={item.moId}>
                    <col />
                    <col />
                    <col />
                    <col />
                    <tbody>
                      <tr>
                        <td>姓名：</td>
                        <td>张三</td>
                        <td>性别</td>
                        <td>男</td>
                      </tr>
                      <tr>
                        <td>备注：</td>
                        <td colSpan="3">我是备注</td>
                      </tr>
                    </tbody>
                  </table>

对应的less可以写成：

table{
      table-layout:fixed;
      width:100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin:20px auto 0;
      font-size: 10px;
      col:nth-child(odd){
        width:@width!important;
      }
      col:nth-child(event){
        width: calc(50% - @width)!important;
      }
 }