【问】

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

 

colspan width issue的更多相关文章

  1. true_kb

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 拆分SharePoint 2013 中CreatedModifiedInfo 的时间

    最近在自定义DisForm.aspx页面时 发现 创建时间信息无法进行拆分,人事MM只想要修改时间,去掉创建人,创建时间和修改人. 于是我的重新研究下在SPD里面如何去拆分这个时间. 在详情页面上找到 ...

  3. JQuery中对各种域进行隐藏和显示操作

    操作的基本步骤: (1)导入jquery相关jar <script type="text/javascript" src="jquery-1.1.3.pack.js ...

  4. JDBC之数据连接

    :数据库语句: create database LandDB; use LandDB; create table T_BL_CANTON_CODE ( CTN_CODE int primary key ...

  5. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  6. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

  7. js barcode 打印

    新建 html <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=&quo ...

  8. asp.net get图

    前段 <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat=& ...

  9. HTML 使用表格制作简单的个人简历

    复习一下HTML,用表格做一个简单的个人简历 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

随机推荐

  1. spring cloud 学习(11) - 用fastson替换jackson及用gb2312码输出

    前几天遇到一个需求,因为要兼容旧项目的编码格式,需要spring-cloud的rest接口,输出gb2312编码,本以为是一个很容易的事情,比如下面这样: @RequestMapping(method ...

  2. STM32 CRC-32 Calculator Unit

    AN4187 - Using the CRC peripheral in the STM32 family At start up, the algorithm sets CRC to the Ini ...

  3. Memcache 分布式高可用集群介绍

    分布式缓存需考虑如下三点: 1.缓存本身的水平线性扩展的问题. 2.缓存大病罚下的本身性能问题. 3.避免缓存的单点鼓掌问题. 分布式缓存存在的问题: 1.内存本身的管理问题.内存的分配,管理和回收机 ...

  4. perl解析xml-XML::Simple/XMLin

    转自: http://blog.charlee.li/perl-xml-simple/ [Perl]用XML::Simple解析XML文件 在Perl中解析XML的方法最常见的就是使用 XML::DO ...

  5. intel32指令中文版

    http://scc.qibebt.cas.cn/docs/optimization/VTune(TM)%20User's%20Guide/mergedProjects/analyzer_ec/mer ...

  6. VS2008 LINK : fatal error LNK1104: cannot open file 'atls.lib'错误解决方案

    用VS 2008编写ATL的64位应用程序时,提示链接错误:VS2008 LINK : fatal error LNK1104: cannot open file 'atls.lib' 问题原因 VS ...

  7. 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

  8. 利用npm 安装删除模块

    转自 涵一原文 利用npm 安装删除模块 1. npm安装模块 [npm install xxx]利用 npm 安装xxx模块到当前命令行所在目录:[npm install -g xxx]利用npm安 ...

  9. Traceroute（路由追踪）的原理及实现

    现实世界中的网络是由无数的计算机和路由器组成的一张的大网,应用的数据包在发送到服务器之前都要经过层层的路由转发.而Traceroute是一种常规的网络分析工具,用来定位到目标主机之间的所有路由器 原理 ...

  10. ListView单条刷新的方法

    我们一般会调用notifydatasetchange通知listView刷新界面.但会造成getView方法被多次调用(画面上能显示多少就会被调用多少次),如果是很明确的知道只更新了list中的某一个 ...