被table单元格colspan属性折磨了

最新推荐文章于 2022-08-18 15:01:02 发布
最新推荐文章于 2022-08-18 15:01:02 发布
阅读量669 收藏
点赞数

基础知识不牢固，被colspan折磨了很长时间

table里面的td使用colspan前提条件是所跨的单元格宽度必须一样，不然显示效果会是属性不起作用或直接导致表格变形，下面的例子可以看出效果

<table width="300" border="1">
<tr>
<td width="100" colspan="2">&nbsp;</td>
<td width="150">&nbsp;</td>
<td width="50">&nbsp;</td>
</tr>
<tr>

<td width="100">&nbsp;</td>
<td width="150">&nbsp;</td>
<td width="50">&nbsp;</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="150">&nbsp;</td>
<td width="50">&nbsp;</td>
</tr>
</table>

weixin_34367845
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table的td设置了colspan 失效
m0_58575070的博客
10-18 863
解决: 给table设置样式 table-layout: fixed;问题: td设置colspan属性无效。
给table的td设置了 colspan 失效
qq_36990322的博客
05-09 6292
给table的td设置了 width 内联样式后失效 代码示例和效果 当我们使用了以下代码时，会发现td的宽度根本不会跟着colspan来排列，在td上设置width也是没有用的； <table border width="100%"> <tbody> <tr> <td colspan="2" ></td> <td colspan="2" ></td> <td colspan="2" >
第一行设定了colspan之后，如何设置td宽度
TheShawshank的博客
01-13 8270
因为一般表格都会定义一个table-layout: fixed;防止td被连串字符撑开，但是如果首行有合并单元格的话 TD宽度定义就会失效最好的办法，在最上边加以下代码来控制td宽度&lt;colgroup&gt;       &lt;col width=60%&gt;&lt;/col&gt;       &lt;col width=20%&gt;&lt;/col&gt;       &lt;co...
谷歌浏览器table不规则表格使用rowspan/colspan导致线条粗细不同
Charonmomo的博客
06-13 1407
背景 希望制作一张表格, 如下图, 但使用rowspan/colspan后导致绘制的表格线条重叠, 导致有些线条粗有些线条细. ps: 只有使用谷歌浏览器时有这个问题, 使用火狐等浏览器时线条显示均正常. 最初效果 最终效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>苍南乐果包装生产计划单</title>
table表格中colspan不起作用的问题
热门推荐
qq_26006367的专栏
10-27 1万+
今天碰到一个colspan不起作用的问题 最终查找到是因为父元素tr设置了display:block原因造成的，在做tr显示与隐藏是，最好用none和“”来切换，不要用block
td的colspan属性值
einsdan的专栏
09-24 1205
IE不允许设置colspan为0
table添加table-layout:fixed属性和colspan后列宽调整无效
xingxingxingge的博客
06-04 4672
给表格加上table-layout: fixed; (防止td被撑开) 属性后,如果 第一行设置了colspan 合并单元格后,那么后面的后面的单元格都被平均分配了,无法设置 width 属性 解决办法: table 单元格宽度一般都是按照第一行设置的宽度来进行分配的,在 table 第一行 添加 colgroup 固定每一列的宽度 示例: <table> <co...
表格单元格合并
lcathm的专栏
05-25 744
colspan：合并同一行中的单元格，值为合并单元格的数量（最小为2） rowspan：合并同一列中的单元格值为合并单元格的数量（最小为2） table,tr,th,td{ border-style:solid; border-width:1px; border-collapse:collapse; } tr{ text-align:center; }
HTML table tr colspan rowspan
滴答滴--依旧
03-07 5820
定义和用法 colspan 属性规定单元格可横跨的列数。 实例 表格单元横跨两列的表格： Month Savings colspan="2">January colspan="2">February TIY 浏览器支持 所以浏览器都支持 colspan 属性。 没有浏览器支持 colspan=
rowspan, colspan 用法
qq_46199553的博客
08-18 1万+
原生表格
antd_Grid栅栏的使用
weixin_42593906的博客
03-30 1283
1.介绍(官网) 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理： 通过row在水平方向建立一组column（简写 col）。 你的内容应当放置于col内，并且，只有col可以作为row的直接元素。 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用<Col span={8} />来创建。 如果一个r...
rowspan和colspan用法详解
weixin_30432579的博客
07-14 690
一.colspan属性: 此属性可以实现横向跨列单元格合并效果 二.rowspan属性: 此属性可以实现跨行单元格合并效果 转载于:https://www.cnblogs.com/chengdama/p/4646688.html...
HTML多行存在colspan时宽度问题
02-17 2629
当多行存在colspan时,可能出现colspan少的单元格宽度不正确的情况，详细举例如下： You can't have overlapping colspans of different widths, the table cells need to line up. You're trying to draw this table: 目标表格: |-----|---------
table 设置colspan后，宽度样式变化
只此浮生是梦中
08-19 6099
页面刚打开 点击展开 //标记colspan=2的td给了我width:40% 在收起–样式变乱 每个td平分tr的宽度，所有宽度失效 处理： 1，去掉width:40%, 其他td设置宽度生效 2，给最下面一行的tr 改变2个td为1个 colspan=‘2’ 的td,所有样式正常 具体原理不明。 ...
table设置colspan属性，列宽显示错位解决方法
zhengxiuchen86的博客
06-13 698
table设置colspan属性，列宽显示错位解决方法
IE中表格colspan属性影响表格宽度问题
06-26 4627
在用IE浏览器制作预览网页的时候，如果表格使用了colspan属性（变现为列数不同，有合并的列），表格的自动宽度会受到很大的影响，以至于错位混乱。
table下td的属性colspan和rowspan
Waite的博客
04-18 4985
colspan和rowspan这两个属性用于创建特殊的表格。colspan用来指定单元格横向跨越的列数：colspan就是合并列的，colspan=2的话就是合并两列。rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，比如rowspan=2就是合并两行，...
td 设置colspan之后设置td width 无效
xingzhezhige的专栏
05-04 1万+
table设置了colspan之后出现td宽度显示不正常，这种情况下，可以通过设置table width=“100%”table-layout="fixed" 解决,当JS动态设置tr的隐藏（即style.display = ‘’）无效时也可以试试，因为我试过style.display = ‘inline’，但是显示时colspan属性失效了，给table加上 width=“100%”tabl
媒体查询合并table单元格
最新发布
04-05
在媒体查询中合并table单元格，可以使用CSS伪元素`:before`和`:after`来模拟单元格合并的效果。 首先，在HTML中给需要合并的单元格添加一个类名，例如`merge-cell`。然后，在CSS中使用媒体查询来针对不同的屏幕尺寸设置单元格的样式。 例如，以下代码将在屏幕宽度小于600px时将第一行的第一列和第二列合并成一个单元格： ```html <table> <tr> <th class="merge-cell">Header 1</th> <th class="merge-cell">Header 2</th> <th>Header 3</th> </tr> <tr> <td class="merge-cell">Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> ``` ```css @media screen and (max-width: 600px) { .merge-cell { position: relative; } .merge-cell:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-top: 1px solid #ccc; border-right: 1px solid #ccc; } .merge-cell:first-child:before { border-left: 1px solid #ccc; } .merge-cell:last-child:before { border-right: none; } } ``` 在上面的代码中，当屏幕宽度小于600px时，`.merge-cell`类的单元格将被设置为相对定位，同时添加一个`:before`伪元素来模拟合并后的单元格。`:before`元素的内容为空，宽度和高度都为100%来覆盖原来的单元格。同时，使用`z-index`属性将伪元素置于原单元格下方，使其不会遮挡其他单元格。 为了模拟合并后的单元格边框，使用`border`属性设置伪元素的边框样式。由于合并后的单元格需要显示原来单元格的左边框和上边框，所以需要添加`border-top`和`border-right`属性。同时，由于第一列的单元格需要显示左边框，所以需要添加`border-left`属性。最后，由于最后一列的单元格不需要显示右边框，所以需要将`border-right`属性设为`none`。 需要注意的是，当合并单元格时，原来的单元格的`colspan`和`rowspan`属性将失效，因此需要确保合并后的单元格中不含有任何其他单元格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值