zoukankan      html  css  js  c++  java
  • colspan width issue

    【问】

    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="20px;">20</td>

    <td style="50px;" colspan="2">50</td>

    <td>a</td>

    <td>a</td></tr>

    <tr>

    <td style="50px;" colspan="2">50</td>

    <td style="20px;">20</td>

    <td>a</td>

    <td>a</td></tr>

    </table>

     

    <h2>Split tables, correct cell dimensions</h2>

    <table border="1">

    <tr>

    <td style="20px;">20</td>

    <td style="50px;">50</td>

    <td>a</td>

    <td>a</td></tr>

    </table>

    <table border="1">

    <tr>

    <td style="50px;">50</td>

    <td style="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=" 20px;"/>
    

                <col style=" 30px;"/>
    

                <col style=" 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

     

  • 相关阅读:
    第一次系统实践作业
    第03组 Beta版本演示
    第03组 Beta冲刺(4/4)
    第03组 Beta冲刺(3/4)
    第03组 Beta冲刺(2/4)
    第03组 Beta冲刺(1/4)
    Java程序(文件操作)
    Java程序(事件监听与计算机界面)
    Java(个人信息显示界面)
    Java(学生成绩管理)
  • 原文地址:https://www.cnblogs.com/time-is-life/p/7396821.html
Copyright © 2011-2022 走看看