空单元格在空时四处移动

Question

我用来创建页面菜单栏的样式表有问题。每当页面没有上一页或下一页时，单元格为空，CSS 仅应用背景图像。每当我尝试实施此解决方案时，构成菜单栏的单元格都会四处移动，并且所有内容都不再对齐。我需要帮助来尝试找出解决此问题的方法。

以下是已应用于图像中显示为灰色后退按钮的空单元格的类。

td.menu-back-disabled {
    background-image: url('back_first.png');
    display: block;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    height: 34px;
    width: 85px;    
}
li.menu-bar {
    list-style-type: none;
    background-image: url('top.png');
    background-repeat: repeat-x;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    height: 34px;
    width: 100%;
}

这是菜单栏的html：

<table class="menu">
<br>
<tr>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=environment" class="menu-home">
</a>
</td>
<td class="menu-edit-selected">
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=upload&number=1&filter=1" class="menu-upload">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=comments" class="menu-comments">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=log&number=1" class="menu-log">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=stats&number=1" class="menu-stats">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=settings" class="menu-settings">
</a>
</td>
<td class="menu-bar">
</td>
<td class="menu-bar-right">
</td>
<td class="menu-back-disabled">
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=edit&number=2&filter=1" class="menu-next">
</a>
</td>
</tr>
</table>

Answer 1

确保您的空单元格中有   作为占位符。

另外，尽量避免使用桌子...

编辑：

这是我的桌子目前的样子。永远不应该有表格换行的地方，因为它只有一列和width:100%;

CSS：

    <style type="text/css">
        #menu {
            width:100%;
        }
        #menu td {
            text-align:center;
        }
        .menu-bar {
            width:30%;
        }
    </style>

HTML：

    <table cellspacing="0" cellpadding="0" id="menu">
        <tr>
            <td>
                <a href="#" class="menu-home">Home</a>
            </td>
            <td class="menu-edit-selected">
                <a href="#" class="menu-home">Edit</a>
            </td>
            <td>
                <a href="#" class="menu-upload">Upload</a>
            </td>
            <td>
            <a href="#" class="menu-comments">Comments</a>
            </td>
            <td>
                <a href="#" class="menu-log">Log</a>
            </td>
            <td>
                <a href="#" class="menu-stats">Statistics</a>
            </td>
            <td>
                <a href="#" class="menu-settings">Settings</a>
            </td>
            <td class="menu-bar">&nbsp;</td>
            <td class="menu-bar-right">&nbsp;</td>
            <td class="menu-back-disabled">
                <a href="#" class="menu-next">Back</a>
            </td>
            <td>
                <a href="#" class="menu-next">Next</a>
            </td>
        </tr>
    </table>

由此产生的任何变化都可能来自填充、边距或设置宽度。 td.menu-bar 和/或 td.menu-bar-right 不能设置为 width:100%;，因为这意味着表格/行的整个宽度，而不是单元格的宽度。