スペース​​均等にテーブルがありません

Question

<td>タグの間に空白を追加する方法を探しています。

私は私がやろうとしていた内容に次のイメージをつかん：

を、私は同じ結果を再現することはできないのですが。どんな助けもありがとう。

#sidebarright { 
 
    float: right; 
 
    width: 30%; 
 
    padding: 0; 
 
    margin: 0; 
 
    padding-top: 20px; 
 
} 
 
#sidebarright a { 
 
    color: grey; 
 
} 
 
.rightbuttons { 
 
    background-image: url(./img/Resources_Button.jpg); 
 
    background-repeat: no-repeat; 
 
    padding: 14px 0 20px 11px; 
 
}

<div id="sidebarright"> 
 
    <a href="#"><img class="buttonUlti" src="img/Pro.jpg" alt="Pro" /></a> 
 
    <table width="100%;"> 
 
    <tbody> 
 
     <tr> 
 
     <th class="resstyle">Resources</th> 
 
     </tr> 
 
     <tr> 
 
     <td class="rightbuttons"><a href="Form.cfm"Forms</a></td> 
 
     <td class="rightbuttons"><a href="Postings.cfm">Job Postings</a></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="rightbuttons"><a href="Locations.cfm">Locations</a></td> 
 
     <td class="rightbuttons"><a href="Com.cfm">Comp</a></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="rightbuttons"><a href="Care.cfm">Care</a></td> 
 
     <td class="rightbuttons"><a href="Photos.cfm">Photos</a></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="rightbuttons"><a href="Safety.cfm">Safety</a></td> 
 
     <td class="rightbuttons"><a href="Directory.cfm">Directory</a></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="rightbuttons"><a href="Alerts.cfm">Alerts</a></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

CELLPADDINGとCSSでCELLSPACINGの一般的な概念は前に回答されている：あなたの特定のケースで
Set cellpadding and cellspacing in CSS?

、問題のいくつかは、私が参照してください。
1） 'Forms'というラベルの前に閉じ角括弧がありません
2）ボールドを適用することによって間隔を制御することができます（例を忠実に模倣するために、別個の水平および垂直値を使用すること）
3）バックグラウンドイメージで説明されている問題は、tdセルのサイズによるスケーリングではないイメージによるものです。背景を適用する：幅100％100％
4）セルの幅を設定するためにパディングを使用すると、セルの内容の長さが追加され、長いラベル（ジョブ転記）が最長のラベルより長くなります。左の列（場所）。幅：50％を使用して列の幅を等しく設定します。
5）順序ヤシルが答えとして（=「2」COLSPANを追加）とアラインをテキストに設定し、目に影響を与えないで：私は修正の下貼り付けた

：いくつかのパディング左と左CSSに

#sidebarright table { 
    width: 100%;  /* moved from html */ 
    border-spacing: 10px 15px; 
} 
.resstyle { padding-left: 10%; text-align: left; } 
.rightbuttons { 
    background-size: 100% 100%; 
    width: 50%; 
} 

Answer 2

希望する可能性があります。

#sidebarright{ 
 
    float: right; 
 
    width: 50%; 
 
    padding: 0; margin:0; 
 
    padding-top: 20px; 
 
    } 
 
    .rightbuttons{ 
 
    background-image: url(./img/Resources_Button.jpg); 
 
    background-repeat:no-repeat; 
 
    padding: 0 20px 20px 0; 
 
    } 
 
    .rightbuttons a{ 
 
    color:grey; 
 
\t border: 1px solid #999; 
 
\t display: block; 
 
\t padding: 10px 20px; 
 
\t text-decoration: none; 
 
    } 
 
    .resstyle{ 
 
\t text-align: left; 
 
    } 
 
    .alerts-btn a{ 
 
\t color: #F00; 
 
    }

<div id="sidebarright"> 
 
      <table width="100%"> 
 
      \t <thead> 
 
        <tr> 
 
         <th colspan="2" class="resstyle">Resources</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td class="rightbuttons"><a href="Form.cfm">Forms</a></td> 
 
         <td class="rightbuttons"><a href="Postings.cfm">Job Postings</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="rightbuttons"><a href="Locations.cfm">Locations</a></td> 
 
         <td class="rightbuttons"><a href="Com.cfm">Comp</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="rightbuttons"><a href="Care.cfm">Care</a></td> 
 
         <td class="rightbuttons"><a href="Photos.cfm">Photos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="rightbuttons"><a href="Safety.cfm">Safety</a></td> 
 
         <td class="rightbuttons"><a href="Directory.cfm">Directory</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="rightbuttons alerts-btn"><a href="Alerts.cfm">Alerts</a></td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
    </div>