没有合适的资源?快使用搜索试试~ 我知道了~
首页表格设置table-layout:fixed后对单元格宽度设置无效
表格设置table-layout:fixed后对单元格宽度设置无效
4 下载量 129 浏览量
更新于2023-05-11
评论
收藏 30KB PDF 举报
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效,下面有详细的解决方法,大家可以学习学习
资源详情
资源评论
资源推荐
表格设置表格设置table-layout:fixed后对单元格宽度设置无效后对单元格宽度设置无效
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对
列宽的设置会失效,下面有详细的解决方法,大家可以学习学习
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会
失效。如果把表格的合并行去掉,又能正常显示。
原因:table-layout: fixed 的表格,各列宽度由第一行决定,后面指定的宽度会被忽略。你第一行合并了,所以各列宽度均分
了。
解决方法一:
在tbody前加
复制代码
代码如下:
<col style="width: 60%" />
<col style="width: 20%" />
<col style="width: 20%" />
解决方法二:
设置一个隐藏的行来规定宽度:
复制代码
代码如下:
<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cellpadding="1">
<tr style="display:none">
<td style="width:100px"></td>
<td style="width:80px"></td>
<td style="width:20px"></td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
这个方法,在IE6,IE7,IE8中都可以正确地显示,但在非IE中,是没起作用的。下面给出另外一种方法:
复制代码
代码如下:
<style>
td{border:1px solid red;}
</style>
<table style="table-layout:fixed;width:200px" border="0" cellspacing="1" cellpadding="1">
<tr style="height:0;">
<th style="width:100px"></th>
<th style="width:80px"></th>
<th style="width:20px"></th>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>1.1</td>
<td>2.1</td>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1.5px solid black;
padding: 5px;
}
table img {
max-width: 150px;
height: auto;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.popup img {
max-width: 100%;
max-height: 100%;
cursor: zoom-out;
}
.sticky-header {
position: sticky;
top: 0;
background-color: #f5f5f5; /* 可根据需要设置背景色 */
}
</style>
</head>
<body>
<button onclick="addRow()">新增一行</button>
<button onclick="addColumn()">添加一列</button>
<button onclick="deleteRow()">删除行</button>
<button onclick="deleteColumn()">删除列</button>
<button onclick="changeSize()">调整大小</button>
<input type="text" oninput="filterTable(0)" placeholder="工艺膜层">
<input type="text" oninput="filterTable(1)" placeholder="AOI Step">
<input type="text" oninput="filterTable(2)" placeholder="不良类型">
<input type="text" oninput="filterTable(3)" placeholder="Layer(Code)">
<input type="text" oninput="filterTable(4)" placeholder="Type">
<input type="text" oninput="filterTable(5)" placeholder="Dpet">
<input type="text" oninput="filterTable(6)" placeholder="Subcode">
Code描述
Image1
Image2
Image3
Image4
Image5
Image6
判定细则
这个表格中怎么调整列宽 weixin_38546846 -
粉丝: 5
- 资源: 920
上传资源 快速赚钱
- 我的内容管理
收起
- 我的资源
快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分
登录查看自己的积分
- 我的C币
登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
-
zigbee-cluster-library-specification
-
JSBSim Reference Manual
-
c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
-
建筑供配电系统相关课件.pptx
-
企业管理规章制度及管理模式.doc
-
vb打开摄像头.doc
-
云计算-可信计算中认证协议改进方案.pdf
-
[详细完整版]单片机编程4.ppt
-
c语言常用算法.pdf
-
c++经典程序代码大全.pdf
-
单片机数字时钟资料.doc
-
11项目管理前沿1.0.pptx
-
基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
-
智慧交通综合解决方案.pptx
-
建筑防潮设计-PowerPointPresentati.pptx
-
SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证 文档复制为VIP权益,开通VIP直接复制 信息提交成功
<input type="text" oninput="filterTable(0)" placeholder="工艺膜层"> | <input type="text" oninput="filterTable(1)" placeholder="AOI Step"> | <input type="text" oninput="filterTable(2)" placeholder="不良类型"> | <input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"> | <input type="text" oninput="filterTable(4)" placeholder="Type"> | <input type="text" oninput="filterTable(5)" placeholder="Dpet"> | <input type="text" oninput="filterTable(6)" placeholder="Subcode"> | Code描述 | Image1 | Image2 | Image3 | Image4 | Image5 | Image6 | 判定细则 |
评论0