html - 如何让我的边界一直延伸到边缘？

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>而不是一个，这有效:)