【问】

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 学习(4) - hystrix 服务熔断处理

    hystrix 是一个专用于服务熔断处理的开源项目,当依赖的服务方出现故障不可用时,hystrix有一个所谓的断路器,一但打开,就会直接拦截掉对故障服务的调用,从而防止故障进一步扩大(类似中电路中的跳 ...

  2. Dapper Miser implementation of CMSIS-DAP, MC HCK as SWD Adapter

    Dapper Miser In late 2013, I created a functional implementation of CMSIS-DAP that runs in a low cos ...

  3. ChibiOS/RT 2.6.9 CAN Driver

    Detailed Description Generic CAN Driver. This module implements a generic CAN (Controller Area Netwo ...

  4. 领域Model？

    前言 领域驱动设计里有很多东西,我们可以应用在各种各样的开发模式里,所以接下来说的一些东西,我们可以部分使用. 说道领域驱动的领域,大家肯定就要开始说Bounded Context,聚合,聚合根,容易 ...

  5. MTK65XX平台充电调试总结

    MTK平台充电调试总结 摘要:调试电池的充放电管理,首先须要深入了解锂电池的电池原理和特点.充放电特性以及主要的电池安全问题.然后须要对MTK的电池管理驱动程序有深入的了解.理解电池充放电算法的基本原 ...

  6. DELPHI 常用虚拟键：VK_

    常数名称                          十六进制值          十进制值     对应按键 VK_LBUTTON                       01       ...

  7. Exchange2003/2010共存模式环境迁移

    一.我司的exchange2010架构设计基于中心的模式进行.而且基于exchange2010sp3进行. 基于dag三台架构设计进行,截止到5月14日,北京局基于2台dag进行,大连局基于excha ...

  8. Java实现在线预览Word,Excel,Ppt文档

    效果图:

  9. Linux 安全信息查看

    终端登录情况 last ssh登录情况 cat /var/log/secure | grep -i "accepted password" 定时任务 cat /var/log/cr ...

  10. python显示多个图表

    plt.figure(figsize=(64,64)) 每次都有创建新的,否则会覆盖 plt.subplot(121) plt.imshow(img,'gray') plt.title('origin ...