Question

好的，我有一个使用母版页和CSS样式表的网站。我无法让我的桌子边框一直到达边缘。我有一种感觉，这个会采取一些解决方案，但如果不是很棒。我正在尝试使用的网站是here我在主页面的主表上有一个边框，我想让横幅菜单下方的边框一直延伸到边缘。当我为mainTable样式规则取出边框间距元素时，它会使线条一直延伸，但当然所有东西都被拼凑在一起。以下是适用的代码：

<table class="mainTable">
    <tr>
        <td class="masterBannerTop" colspan="6" >
            <a href="Default.aspx"><img style="border: none; display: block; margin: 0 auto;" alt="Travel Joan's Blog Banner" src="Website%20Photos/HeadBanner.jpg" /></a>
        </td>     
    </tr>
    <tr>

    <td class="masterBannerNav"><a href="Default.aspx">HOME</a></td>
    <td class="masterBannerNav"><a href="About.aspx">ABOUT ME</a></td>
    <td>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Font-Size="16pt">
        <LevelMenuItemStyles>
            <asp:MenuItemStyle CssClass="masterBannerMenu" />
        </LevelMenuItemStyles>
        <LevelSubMenuStyles>
            <asp:SubMenuStyle CssClass="subMenuStyle" />
        </LevelSubMenuStyles>
            <Items>
                <asp:MenuItem Text="WHERE I'VE BEEN" NavigateUrl="~/whereivebeen.aspx">
                    <asp:MenuItem Text="UNESCO Sites" NavigateUrl="~/unesco.aspx" />
                    <asp:MenuItem Text="Places" NavigateUrl="~/BlogPosts.aspx" />
                </asp:MenuItem>
            </Items>
        </asp:Menu>
    </td>
    <td class="masterBannerMenu">
        <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal">
        <LevelSubMenuStyles>
            <asp:SubMenuStyle CssClass="masterBannerMenu" />
        </LevelSubMenuStyles>
            <Items>
                <asp:MenuItem Text="PHOTOGRAPHY" NavigateUrl="~/photos.aspx">
                    <asp:MenuItem Text="Street Photos" NavigateUrl="~/StreetPhotos.aspx" />
                    <asp:MenuItem Text="People Photos" NavigateUrl="~/PeoplePhotos.aspx" />
                </asp:MenuItem>
            </Items>
        </asp:Menu>
    </td>
    <td class="masterBannerNav"><a href="Links.aspx">LINKS</a></td>
    <td class="masterBannerNav"><a href="Contact.aspx">CONTACT ME</a></td>

    </tr>
    <tr>
        <td colspan="6">
             </td>
    </tr>
    <tr>
        <td colspan="6" style="border-bottom: 1px solid #DDDDDD;">
             </td>
    </tr>

以下是此代码中引用的所有元素的CSS：

.mainTable
{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    border: 1px solid #DDDDDD;
    border-spacing:30px;
}
.masterBannerTop a
{
    background-color: transparent;
    display: block;
    margin: 0 auto;
    border:none;
}
.masterBannerNav a
{
    font-family:"Century Gothic";
    font-size: 16pt;
    width: auto;
    text-align: center;  
    color: Black;
    text-decoration: none;   
    white-space: nowrap;

}
.masterBannerMenu a
{
    font-family:"Century Gothic";
    font-size: 16pt;
    width: auto;
    text-align: left;  
    color: Black;
    text-decoration: none;   

}

我已经尝试确保.mainTable中没有填充。还有什么？

Answer 1

您是否意识到<table>包含哪些内容？表格布局用于表格数据。你不用Excel写邮件。

This文章可能会帮助您做出正确的决定。

当您将border-spacing:30px;设置为<table>时，您无法实现。使用<div>，这将非常简单。

您可以通过以下方式重建布局：http://jsfiddle.net/Qtmkw/4/，因此您有两个<table>而不是一个，这可行：）

如何使我的边界一直到达边缘？

1 个答案: