vue-table-<td colspan=“2“>不生效

代码是2:1:4:1:4五分布局,效果却是如下:

因为这里的表格没有指定表格布局算法

java 复制代码
/*设置表格布局算法*/
2 table{
3     table-layout:fixed;
4 }

这里需要了解table-layout属性值、定义和用法、固定表格布局、自动表格布局。

1定义和用法

tableLayout属性用来显示表格单元格、行、列的算法规则。

①该属性指定了完成表布局时所用的布局算法。

②固定布局算法比较快,但灵活性不强。

③自动布局算法比较慢,却更能反映传统的HTML表。

2固定表格布局

①与自动表格布局相比,允许浏览器更快地对表格进行布局;

②其水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关;

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

3自动定表格布局

①其列的宽度是由列单元格中没有折行的最宽的内容设定的;

②由于其需要在确定最终的的布局之前访问表格中的所有内容,此算法有时会需要较长时间。

4table-layout属性值

①automatic:(默认值)列宽度由单元格内容设定;

②fixed: 列宽由表格宽度和列宽度设定;

③inherit:规定应该从父元素继承table-layout属性的值。

如果需要使用colspan="3"来决定布局,就需要给<table>标签设置table-layout属性值,如下:

复制代码
<table style="table-layout: fixed">
java 复制代码
      <table class="table table-bordered"   valign="center" style="table-layout: fixed">
        <tr>
         <td colspan="2" rowspan="4" >小程序所有人</td>
          <td colspan="1">姓名/名称</td>
          <td colspan="4">李跳跳</td>
          <td colspan="1">身份证号</td>
          <td colspan="4">222222</td>
        </tr>
      </table>
相关推荐
祝余呀5 分钟前
html初学者第一天
前端·html
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全6 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing6 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆6 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding7 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js