• 首先要知道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;
      }
 }
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐