【问】

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. [原创]浅谈H5页面性能优化方法

    [原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...

  2. LPC1800 and LPC4300 MCUs

    LPC1800 Series microcontrollers At 180 MHz, LPC1800 Series microcontrollers combine the industry's f ...

  3. 《Go语言实战》摘录：6.1 并发 - 并行 与 并发

    6.1 并行 与 并发

  4. linux 内核升级2 转

    linux内核升级 一.Linux内核概览 Linux是一个一体化内核(monolithic kernel)系统. 设备驱动程序可以完全访问硬件. Linux内的设备驱动程序可以方便地以模块化(mod ...

  5. IOS开发中的CGFloat、CGPoint、CGSize和CGRect

    IOS开发中的CGFloat.CGPoint.CGSize和CGRect http://developer.apple.com/library/ios/#documentation/GraphicsI ...

  6. C#编程（小结）---------- 小总结

    总结 概括 委托是寻址方法的.NET版本,类似于C++中的指针.委托可以理解为指向函数的指针,它是类型安全的,定义了具体的参数和返回值. 定义一个委托,实际上是定义一个类,委托是对方法的引用,如方法F ...

  7. Linux下eclipse编译C/C++程序遇到 undefined reference to `pthread_create'的异常解决办法

    解决方法:右键点击的当前project—>properties—>C/C++ Build—>Settings—>Tool Settings选项卡—>GCC C Linke ...

  8. Weblogic跨域session冲突解决办法

    一.现象: 在WebLogic中,有两个不同域A(端口:9000)和B(端口:8000),应用CA在域A中,应用CB在域B中,进行如下操作: 1.先登录应用CA,再登录应用CB,然后,切换回应用CA, ...

  9. android获取屏幕长宽的方法

    package com.kale.imageview02; import android.annotation.SuppressLint; import android.app.Activity; i ...

  10. 在 Linux 下用 CMAKE 编译安装 OpenCV 3.2.0

    [安装相关软件和库] 1.安装CMAKE:这里使用apt-get来安装; CMAKE 是一个跨平台编译工具,能够输出各种makefile,和project 文件,指导编译器编译,对CMAKE具体的可以 ...