【问】

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. sublime text2 用ctags插件实现方法定位(转)

    我们用sublime几乎都会首先安装这个插件,这个插件是管理插件的功能,先安装它,再安装其他插件就方便了. 点击sublime的菜单栏 view->show console :现在打开了控制台, ...

  2. STM32 Controller area network (bxCAN) Identifier filtering

    Identifier filtering In the CAN protocol the identifier of a message is not associated with the addr ...

  3. centos安装tomcat7

    转自:http://www.cnblogs.com/sixiweb/archive/2012/11/26/2789458.html 安装tomcat7: tomcat7下载主页: http://tom ...

  4. phonegap helloworld 之android

    一 phonegap cordova: http://cordova.apache.org/phonegap: http://phonegap.com PhoneGap 是Cordova的一个开源的发 ...

  5. 【iOS开发-91】GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例

    (1)GCD实现的同步异步.串行并行. --同步sync应用场景:用户登录,利用堵塞 --串行异步应用场景:下载等耗时间的任务 /** * 由于是异步.所以开通了子线程.可是由于是串行队列,所以仅仅须 ...

  6. XPath and TXmlDocument

    XML example, from the OmniXML XPath demo: <?xml version="1.0" encoding="UTF-8" ...

  7. ASIHTTPRequest-断点续传需要原网站支持！

    转:http://zyc-to.blog.163.com/blog/static/17152400201110221114526/ 从0.94版本开始,ASIHTTPRequest可以恢复中断的下载 ...

  8. iOS6新特征：UICollectionView介绍-非常棒 －转

    传送门:http://www.devdiv.com/forum.php?mod=viewthread&tid=128378

  9. C#编程（二十六）----------泛型

    泛型 有了泛型,就可以创建独立于被包含类型的类和方法了.我们不必给不同的类型编写功能相同的许多方法或类,只创建一个方法或类即可. 另一个减少代码的选项是使用object类,但object类不是类型安全 ...

  10. Java编解码分析

    一.为什么要编解码? 网络或磁盘传输的单位都是字节,平常我们使用的单位都是字符,所以数据需要在字节和字符之间进行转换. 二.编解码概念 1.编码:字符转换成字节 2.解码:字节转换成字符 三.常用字符 ...