colspan width issue

最新推荐文章于 2024-12-15 22:13:44 发布
转载 最新推荐文章于 2024-12-15 22:13:44 发布 · 122 阅读 · 0
文章标签：

#xhtml

本文探讨了HTML表格中使用colspan属性时遇到的单元格尺寸不准确的问题，并提供了解决方案。通过调整表格结构和引入隐藏列，使得不同宽度的colspan能够正确显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【问】

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

 

Oracle EBS WIP任务单批量发料功能开发
陈显平的专栏-Oracle EBS
04-12 2194
最近公司线材半成品需要分层成多个半成品，由一束线的半成品变成三四十多个半成品，该业务需求会带来哪些影响呢？增加半成品的物料类别、物料编码、工艺路线、资源和BOM清单等等会产生大量任务单，从任务单发料至完工各个环境工作量增加，导致管理成本上升仓库就提出任务单能不能批量发料功能？从技术角度来说，理论上是可以实现在的。经过对业务部关键用户的需求调研和分析得出如下:由于不同装配件所有用到的原材料或半成品在...
ant-table表合并行和合并列
kassiaaaa的博客
02-03 850
以下是合并行，合并列时把所有的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 4753
在用IE浏览器制作预览网页的时候，如果表格使用了colspan属性（变现为列数不同，有合并的列），表格的自动宽度会受到很大的影响，以至于错位混乱。
HTML多行存在colspan时宽度问题
02-17 2749
当多行存在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 4353
问题如标题所示， 解决办法：设置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 140
a链接、img标签、块级元素和行内元素、列表、表格
表格内容太多怎么隐藏悬停才展示完整内容<div style="max-height: 900px;overflow: auto;"> <table class="table table-hover table-bordered" style="margin-bottom: 0;"> <thead class="bg-light" style="position: sticky; top: 0; z-index: 1;"> <tr class="head-table"> <th>序号</th> <th>异常标识码</th> <th>操作</th> <th>异常类型</th> <th>工段</th> <th>异常来源</th> <th>异常项目</th> <th>异常等级</th> <th>设备</th> <th>批次号</th> <th>站点</th> <th>工艺流程</th> <th>产品料号</th> <th>异常描述</th> <th>异常CODE类型</th> <th>异常数据</th> <th>异常开始时间</th> <th>是否处理</th> <th>处理人员</th> <th>处理备注</th> <th>结案时间</th> </tr> </thead> <tbody> <tr th:each="data,iterStat : ${page.records}" class="center-table"> <td th:text="${iterStat.count}"></td> <td th:text="${data.ALARMTIMEKEY}"></td> <td th:text="${iterStat.count}"></td> <td th:text="${data.ISSUETYPE}"></td> <td th:text="${data.FACTORYNAME}"></td> <td th:text="${data.ALARMTYPE}"></td> <td th:text="${data.ALARMID}"></td> <td th:text="${data.ALARMLEVEL}"></td> <td th:text="${data.MACHINENAME}"></td> <td th:text="${data.LOTNAME}"></td> <td th:text="${data.PROCESSOPERATIONNAME}"></td> <td th:text="${data.PROCESSFLOWNAME}"></td> <td th:text="${data.PRODUCTSPECNAME}"></td> <td th:text="${data.ALARMCOMMENT}"></td> <td th:text="${data.REASONCODETYPE}"></td> <td th:text="${data.REASONCODE}"></td> <td th:text="${data.START_TIME}"></td> <td th:text="${data.SOLVEFLAG}"></td> <td th:text="${data.SOLVE_USER}"></td> <td th:text="${data.SOLVE_REASON}"></td> <td th:text="${data.END_TIME}"></td> </tr> <!-- 空数据提示 --> <tr th:if="${page.records.isEmpty()}"> <td colspan="21" class="text-center text-muted">暂无数据</td> </tr> </tbody> </table> </div>
03-08
但表格单元格默认是自动调整宽度的，可能需要固定宽度或者设置max-width，否则文本可能不会正确截断。不过，如果表格列数太多，固定宽度可能导致布局问题，需要找到一个平衡点。 接下来是悬停显示完整内容的功能。...
hexo（sakura）给博客增添侧边栏（回到顶部，跳转评论，深色模式，播放音乐)&&Valine-1.4.4新版本尝鲜+个性制定（表情包、qq头像、UI样式）
热门推荐
08-14 3万+
文章目录hexo（sakura）给博客增添侧边栏（回到顶部，跳转评论，深色模式，播放音乐）原理直接使用Valine-1.4.4新版本尝鲜+个性制定（表情包、qq头像、UI样式）总结 本文全是转载 hexo（sakura）给博客增添侧边栏（回到顶部，跳转评论，深色模式，播放音乐） 原理 1.回到顶部 id为btn，当点击时，触发回滚到顶部。会监听滚动条，如果在顶部，就不会出现回到顶部的图标。 js： function BackTOP() { $("#btn").hide();
Redmine 部署分享 2022.10
gikiwiki的博客
10-12 2707
本文记录了我们曾部署到 Redmine 的插件以及一些配置技巧，供大家参考。
【HTML】表格
天亮就睡
06-12 816
<table> 定义表格 <table> </table> 常用属性: align:用于设定表格的对齐方式。 bgcolor:用于设定表格的背景颜色。 border:用于设定表格边框的宽度width:用于规定表格的宽度。 <tr> 定义表格的行 <table> <tr></tr> </table> <tr>标签用于定义表格的行,包含—个或多个th或td元素。 常用属性: align:用于设定
issue queue的实现方式
major的博客
12-15 1470
在超标量处理器中，为了并行执行指令，一般都有很多的FU，例如有些FU负责整数的加减,有些FU负责存储器访问,有些FU负责乘除法运算等。对于超标量处理器来说，还需要考虑一个重要的事情，就是在流水线的哪个阶段读取寄存器的值，它直接决定了处理器中其他一些部件的设计。现代处理器的折中方式：使某几个FU共用一个发射队列；上述三种结构都是正交的，可以相互组合；
【发射】issue
Alchemist2002的博客
03-30 1210
发射队列（IQ）也可以叫做保留站（Reservation Station, RS）。发射队列会按照一定规则，选择源操作数都已经准备好的指令，将其送到FU中执行，是处理器从顺序执行到乱序执行的分界线。 发射阶段的硬件复杂，时序处于处理器当中的关键路径上。 下图给出发射阶段的执行过程。 发射队列(( IssueQueue )，用来存储已经被寄存器重命名，但是没有被送到FU执行的指令，通常也被称为保留站(Reservation Station) 分配(Allocation )电路，用来从发射队列中找到空闲的空间
第8章 指令发射 摘录
weixin_47955824的博客
07-04 1208
指令发射
超标量处理器设计笔记（11）发射内容：分配、仲裁、唤醒
qq_41703711的博客
12-15 1101
Allocation分配已被重命名的的指令发射队列存储已被重命名，但没有被送入到 FU 的指令选择 arb 电路多个指令操作数都准备好后，找到最合适的指令，送到 FU唤醒电路指令经过 FU 后，计算得到结果，通知给等待其结果的指令数据捕捉：两读一写，从寄存器读出，写入发射队列，再继续读出，功耗大在 ROB 进行寄存器重命名时，会使用数据捕捉#问题 不用关心指令结果的变化是什么意思？压缩式发射队列非压缩式发射队列功耗每个周期都需移动，大小分配电路。
第9章 指令执行 摘录
weixin_47955824的博客
07-05 1106
指令执行
第一行设定了colspan之后，如何设置td宽度
TheShawshank的博客
01-13 8471
因为一般表格都会定义一个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...
colspan
最新发布
06-13
<td colspan="number">Content ``` - `number` 表示该单元格需要跨越的列数。 - 如果未指定 `colspan`，则单元格默认仅占据一列。 #### 示例代码 以下是一个简单的表格示例，展示了如何使用 `colspan`： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值