0

我有一个有两行三列的表。第一行用于正文，第二行用于页脚。

我想用 CSS 设计页脚，这样看起来和感觉更好。我可以添加图像，但是每个图像之间存在间隙，因此效果不佳。

该行tr有三列，每列td有一张图像。

下面是 HTML 代码。

<tr>
    <td class="FooterLeftBG"> //left css class
    </td>
    <td style="width: 85%;" class="FooterBG"> //middle css class
        <table style="width: 85%">
            <tr>
                <td align="left">
                some text
                </td>
                <td style="padding-top: 1px">
                some text</td>
            </tr>
        </table>
    </td>
    <td  class="FooterRightBG"></td>//right css class
</tr>

这是CSS代码：

td.FooterLeftBG // CSS class for left td, used to make left hand side curve footer 
    {
    background: url('footer-leftbg.png') bottom left;
    height:35px;
    width:12px;
    padding:0px;
    float:right;
    }
td.FooterRightBG // CSS class for right td, used to make right hand side curve footer
    {
    background: url('footer-right-bg.png') bottom right;
    height:35px;
    padding:0px;
    width:12px;
    float:left;
    }
td.FooterBG // CSS class for td holding the footer contents
    {
    background:url('footer-middle-bg.png');
    background-repeat:repeat-x;
    border-collapse:collapse;
    height:35px;
    width:5px;
    }

请帮忙。我已经尝试了 1 周 :( 我也通过谷歌尝试过。

预期格式：

4

3 回答 3

1

您可以将表格包装在一个 Div 中，并将下面的 CSS 类应用于它。该示例具有所有四个弯曲边界，您可以根据需要修改半径值：

.container {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    box-shadow: 0 0 10px #909090;
    cursor: default;
    display: none;
    left: 12px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    position: relative;
    text-align: left;
    z-index: 100;
}
于 2012-05-08T12:35:39.057 回答
1

如果您想在布局中坚持使用表格，可以尝试将以下 CSS 应用于<table>标签：

 border-collapse: collapse;

这可能会消除页脚图像之间的空间。

于 2012-05-08T13:27:43.277 回答
0

尝试将 cellspacing='0' 添加到 HTML 中的表格标记

于 2012-05-17T15:18:47.773 回答