1

我用一张桌子包装我的表格，

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

我的问题：[row 0] 和 [row 2] 中的单元格应该是 8px 高，而不是 22px。

我正在使用表格的 4 个角单元格来显示圆形边缘，但其他 4 个“边缘”单元格正在重复具有 1px 尺寸的背景，高或宽取决于它是否在 x 或 y 中重复，但它们在哪里在 [row 0] 和 [row 2] 中重复-x'，td 没有正确地粘在高度上。

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

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

显示问题的左上角屏幕截图

<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 的一个众所周知的问题，请帮忙。

4

1 回答 1

1

通常，我会谴责在布局中使用表格，但这是一种没有真正好的替代方案的情况（也许曾经border-image得到更好的支持）。话虽如此，HTML5 规范要求为用于布局的表格赋予role="presentation"属性，以便屏幕阅读器和类似功能（例如盲人可访问性）。它仍然可能会给他们带来困难，也可能会惹恼搜索引擎蜘蛛，但这是您的选择。

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

第三，您提到您认为您的 doctype 引起了问题，但您没有包含它。无论如何，您可能应该使用 HTML5 文档类型——它只是<!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：

表#mainLayout
{
    边距：0；
    填充：0；
}

表#mainLayout td
{
    边距：0；
    填充：0；
}

table#mainLayout thead tr
{
    高度：8px；
}

table#mainLayout tfoot tr
{
    高度：9px；
}

表#mainLayout .left-cell
{
    宽度：8px；
}

table#mainLayout .right-cell
{
    宽度：9px；
}

table#mainLayout thead td
{
    background-image: url（图片去哪里）；
}

table#mainLayout thead td.left-cell
{
    background-image: url（图片去哪里）；
}

table#mainLayout thead td.right-cell
{
    background-image: url（图片去哪里）；
}

表#mainLayout tbody td
{
    background-image: url（图片去哪里）；
}

table#mainLayout tbody td.left-cell
{
    background-image: url（图片去哪里）；
}

table#mainLayout tbody td.right-cell
{
    background-image: url（图片去哪里）；
}

table#mainLayout tfoot td
{
    background-image: url（图片去哪里）；
}

table#mainLayout tfoot td.left-cell
{
    background-image: url（图片去哪里）；
}

table#mainLayout tfoot td.right-cell
{
    background-image: url（图片去哪里）；
}

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

于 2012-08-02T16:58:03.017 回答