Question

我用桌子包裹我的表格，

我的表如下：9个单元格，3行，3个列，[0,0]是左上角，[1,1]是主要表单内容，[2,2]是右下角[< strong> all在我的描述中为零索引]。我正在包裹我的表格，所以我可以在它周围放一个“阴影”。

我的问题：[行0]和[行2]中的单元格被假定为8px高，而不是22px。

我正在使用表格的4个角单元来显示圆形边缘，但其他4个“边缘”单元格正在重复1px维度的背景，无论是高还是宽，取决于它是以x还是y重复，而是如果他们在[第0行]和[第2行]中'重复-x'，则td不会正确地保持高度。

Borwsers：IE只在'IE 7/8'兼容性视图中显示问题，但chrome和firefox已经开始做同样的事情，认为我的DOCTYPE正在影响它。

我附加了一个屏幕截图部分和一些HTML编辑，以删除它产生的可怕的长Web资源URL（我将其作为webcontrol）

screen shot of top left corner showing the issue

<table cellpadding=0 cellspacing=0 border=0 style="width:560px;">
<tr>
    <td style="background-image:url('url'); width:8px; height:8px;">
        <img src='url' width='8' height='8'/>
    </td>   
    <td style="background-image:url('url'); height:8px;">
        <img src='url' height='8'/>
    </td>   
    <td  style="background-image:url('url'); width:9px; height:8px;">
        <img src='url' width='9' height='8'/>
    </td>
</tr>
<tr>
    <td style="background-image:url('url'); width:8px;">
    </td>
    <td  style="background-color:#DDDDDD">
        <!-- main table content !-->
    </td>
    <td style="background-image:url('url')">
    </td>
</tr>
<tr>
    <td style="background-image:url('url') width='8' height='9'>
        <img src='url' width='8' height='9'/>
    </td>
    <td style="background-image:url('url') height='9'>
    </td>
    <td style="background-image:url('url'); width:9px; height:9px;">
        <img src='url' width='9' height='9'/>
    </td>

</tr>

</table>

我遇到了以前没有确认正确高度或宽度的表格的问题，以及先前的修复方法，确保没有文本（或黑色字符）强制执行高度，并确保表格单元格不为空（我在一些单元格中插入了bg图像作为img标签，没有效果。）

我真的希望这是一个众所周知的HTML问题，请帮忙。

Answer 1

通常情况下，我会在布局中解密表的使用，但这是一个没有真正替代方案的情况（可能一旦border-image得到更好的支持）。话虽这么说，HTML5规范要求用于布局的表格被赋予role="presentation"属性，以便于屏幕阅读器和类似（例如盲人的可访问性）。它仍然可能会给他们带来困难，也可能会使搜索引擎蜘蛛陷入混乱，但这是你的选择。

其次，像这样的内联样式会导致维护噩梦。您应该有一个外部样式表，并将其包含在<link rel="stylesheet" type="text/css" href="URL.css"/>中。使用class和id属性可以使您的表格（或其他任何内容）更容易设置样式。

第三，您提到您认为您的doctype导致了问题，但您没有将其包括在内。无论如何，您应该使用HTML5 doctype - 它只是<!DOCTYPE html>。旧的HTML 4.x / XHTML 1.x /等。 doctypes继续使用可能不是一件好事。

将所有这些放在一起，你就有了类似这样的HTML：

<!DOCTYPE html>
<html>
    <head>
        <!-- any other header stuff you need, like meta or title -->
        <link rel="stylesheet" type="text/css" href="something.css"/>
    </head>

    <body>

        <table id="mainLayout" role="presentation">
            <thead>
                <tr>
                    <td class="left-cell"></td>
                    <td></td>
                    <td class="right-cell"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="left-cell"></td>
                    <td><!-- main content goes here. --></td>
                    <td class="right-cell"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="left-cell"></td>
                    <td></td>
                    <td class="right-cell"></td>
                </tr>
            </tfoot>
        </table>

    </body>
</html>

现在为CSS：

table#mainLayout
{
    margin: 0;
    padding: 0;
}

table#mainLayout td
{
    margin: 0;
    padding: 0;
}

table#mainLayout thead tr
{
    height: 8px;
}

table#mainLayout tfoot tr
{
    height: 9px;
}

table#mainLayout .left-cell
{
    width: 8px;
}

table#mainLayout .right-cell
{
    width: 9px;
}

table#mainLayout thead td
{
    background-image: url(wherever the image goes);
}

table#mainLayout thead td.left-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout thead td.right-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout tbody td
{
    background-image: url(wherever the image goes);
}

table#mainLayout tbody td.left-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout tbody td.right-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout tfoot td
{
    background-image: url(wherever the image goes);
}

table#mainLayout tfoot td.left-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout tfoot td.right-cell
{
    background-image: url(wherever the image goes);
}

更具体的规则（包括.left-cell / .right-cell）会覆盖不太具体的规则，因此没有必要拥有.center-cell规则。

表格单元格未保持正确的高度，重复背景

1 个答案: