colspan宽度问题

本文介绍了colspan宽度问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法在使用 colspan 的列上设置固定宽度。

I'm having trouble setting fixed widths on columns which use colspan.

，Firefox或Chrome可以找出如何使用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.

编辑：

已尝试过doctypes

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">

推荐答案

在第1行中，您的列宽度为20,50/2;在第2行中，您的列宽为50/2，20。

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.

您不能有不同宽度的重叠colspans，表格单元格需要排列。您尝试绘制此表格：

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:

|-----|----.-----|
|-----.----|-----|

其中。是由列跨度隐藏的列。尝试此HTML：

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>

这篇关于colspan宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！