colspan width issue

最新推荐文章于 2023-12-15 18:04:37 发布
最新推荐文章于 2023-12-15 18:04:37 发布
阅读量91 收藏
点赞数
文章标签： xhtml

【问】

I'm having trouble setting fixed widths on columns which use colspan.

It seems that neither IE8, Firefox or Chrome can figure out how to correctly size columns with colspan.

Try the following code to see the problem in action:

<h2>One table with colspans, incorrect cell dimensions</h2>

<table border="1">

<tr>

<td style="width:20px;">20</td>

<td style="width:50px;" colspan="2">50</td>

<td>a</td>

<td>a</td></tr>

<tr>

<td style="width:50px;" colspan="2">50</td>

<td style="width:20px;">20</td>

<td>a</td>

<td>a</td></tr>

</table>

 

<h2>Split tables, correct cell dimensions</h2>

<table border="1">

<tr>

<td style="width:20px;">20</td>

<td style="width:50px;">50</td>

<td>a</td>

<td>a</td></tr>

</table>

<table border="1">

<tr>

<td style="width:50px;">50</td>

<td style="width:20px;">20</td>

<td>a</td>

<td>a</td></tr>

</table>

Can anyone explain why this might be happening, and if there is a workaround.

EDIT:

have tried doctypes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

【答】

 

Because your column widths are contradicting. In row 1 you have columns widths 20, 50/2; in row 2 you have column widths 50/2, 20. 

Row 1, Column 1 is defined as 20.


Row 1, Column 2 is defined as 50.


Row 2, Column 1 is defined as 50.


Row 2, Column 2 is defined as 20.

You can't have overlapping colspans of different widths, the table cells need to line up. You're trying to draw this table: 

|-----|----------|


|----------|-----|

Which is not valid since the columns don't line up. In order to do this you need to add more columns: 

|-----|----.-----|


|-----.----|-----|

Where "." is a column that is hidden by the column span. Try this HTML: 

<!DOCTYPE HTML>

 

<html>


    <head>


        <title>Test</title>


    </head>


    <body>


        <table border="1" style="table-layout: fixed;">


            <col style="width: 20px;"/>


            <col style="width: 30px;"/>


            <col style="width: 20px;"/>


            <tbody>


                <tr>


                    <td>20</td>


                    <td colspan="2">50</td>


                </tr>


                <tr>


                    <td colspan="2">50</td>


                    <td>20</td>


                </tr>


            </tbody>


        </table>


    </body>


</html>

 

From: https://stackoverflow.com/questions/5373893/colspan-width-issue

 

weixin_33756418
关注
Oracle EBS WIP任务单批量发料功能开发
陈显平的专栏-Oracle EBS
04-12 1999
最近公司线材半成品需要分层成多个半成品，由一束线的半成品变成三四十多个半成品，该业务需求会带来哪些影响呢？增加半成品的物料类别、物料编码、工艺路线、资源和BOM清单等等会产生大量任务单，从任务单发料至完工各个环境工作量增加，导致管理成本上升仓库就提出任务单能不能批量发料功能？从技术角度来说，理论上是可以实现在的。经过对业务部关键用户的需求调研和分析得出如下:由于不同装配件所有用到的原材料或半成品在...
ant-table表合并行和合并列
kassiaaaa的博客
02-03 801
以下是合并行，合并列时把所有的rowSpan 换成colSpan 1.html—table引入(:dataSource=“makeData(dataSource.data)”) <a-table :scroll="{y: dataSource.rowsHeight,x:1800}" :customRow="customHover" bordered :columns="columns" :dataSource="makeData(dataSource.data)"
IE中表格colspan属性影响表格宽度问题
06-26 4647
在用IE浏览器制作预览网页的时候，如果表格使用了colspan属性（变现为列数不同，有合并的列），表格的自动宽度会受到很大的影响，以至于错位混乱。
HTML多行存在colspan时宽度问题
02-17 2657
当多行存在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之后再设置width 无效
gz-郭小敏的博客
01-24 4276
问题如标题所示， 解决办法：设置table-layout="fixed"
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
7.HTML的常用标签使用（一）
Kylincsg的博客
07-08 109
a链接、img标签、块级元素和行内元素、列表、表格
js自定义radio
04-08 697
思想：因为每一个radio标签后面都会有一个label标签，这里就是借助radio的状态（eg:未选中状态，选中状态，获取焦点时状态等）改变label背景来实现效果，并将radio隐藏。
Redmine 部署分享 2022.10
gikiwiki的博客
10-12 2566
本文记录了我们曾部署到 Redmine 的插件以及一些配置技巧，供大家参考。
gridview 冻结行与列
kehua668的专栏
09-19 846
-----1.css引用： <link rel="stylesheet" href="css/tableStyle.css" /> <link rel="stylesheet" href="css/superTables.css" /> -----2.js引用： <script type="text/javascript" src="superTabl...
【HTML】表格
天亮就睡
06-12 631
<table> 定义表格 <table> </table> 常用属性: align:用于设定表格的对齐方式。 bgcolor:用于设定表格的背景颜色。 border:用于设定表格边框的宽度width:用于规定表格的宽度。 <tr> 定义表格的行 <table> <tr></tr> </table> <tr>标签用于定义表格的行,包含—个或多个th或td元素。 常用属性: align:用于设定
【发射】issue
Alchemist2002的博客
03-30 944
发射队列（IQ）也可以叫做保留站（Reservation Station, RS）。发射队列会按照一定规则，选择源操作数都已经准备好的指令，将其送到FU中执行，是处理器从顺序执行到乱序执行的分界线。 发射阶段的硬件复杂，时序处于处理器当中的关键路径上。 下图给出发射阶段的执行过程。 发射队列(( IssueQueue )，用来存储已经被寄存器重命名，但是没有被送到FU执行的指令，通常也被称为保留站(Reservation Station) 分配(Allocation )电路，用来从发射队列中找到空闲的空间
第8章 指令发射 摘录
weixin_47955824的博客
07-04 969
指令发射
issue queue的实现方式
最新发布
major的博客
12-15 1117
在超标量处理器中，为了并行执行指令，一般都有很多的FU，例如有些FU负责整数的加减,有些FU负责存储器访问,有些FU负责乘除法运算等。对于超标量处理器来说，还需要考虑一个重要的事情，就是在流水线的哪个阶段读取寄存器的值，它直接决定了处理器中其他一些部件的设计。现代处理器的折中方式：使某几个FU共用一个发射队列；上述三种结构都是正交的，可以相互组合；
第一行设定了colspan之后，如何设置td宽度
TheShawshank的博客
01-13 8315
因为一般表格都会定义一个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...
html colspan标签
10-08
HTML中的colspan属性用于指定一个...例如，如果一个单元格的colspan属性为2，则该单元格将占据两列。 示例代码： ``` 单元格1 <td colspan="2">单元格2，占据2列 <td colspan="3">单元格3，占据3列 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值