CSSを使ってフッターを右手側と左手側に作る方法

Question

私は2行3列のテーブルを持っています。最初の行は本体の目的を果たし、2行目はフッターの目的を果たします。

CSSを使用してフッタをデザインしたいので、ルック＆フィールが改善されています。私は画像を追加することができますが、各画像間にはギャップがあり、うまく出ていません。

行trには3つの列があり、各tdには1つのイメージがあります。

以下は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; 
    }  

助けてください。 。私はまた、Google経由試してみました:(

1週間に予想されるフォーマットしようとしている：あなたは本部内のあなたのテーブルをラップすることができ

• http://i.stack.imgur.com/c7ULg.png
• http://i.stack.imgur.com/2J4zW.png

Answer 1

をし、サンプルに4つの曲線ボーダーがすべてある場合、必要に応じて半径値を変更できます：

.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; 
} 

Answer 2

あなたのレイアウトのためのテーブルに固執する場合は、<table>タグに以下のCSSを適用してみてください：

border-collapse: collapse; 

フッターの画像間のスペースを取り除くかもしれません。

Answer 3

てみ= CELLSPACINGを追加する「0」あなたのテーブルタグにHTML