divの境界線とテーブルの境界線を揃える方法

Question

私はdivの黒い境界線に至るまでテーブルから黒いバーを作成しようとしています。私は何を間違えているのですか？私はしばらくの間これをぶち壊していて、私に手を差し伸べ始めています。 :(私は、以下のすべてのCSSとHTMLを用意しました。うまくいけば、誰かがこれで私の手を与えることができます。感謝を事前に！

<div style="background: #DCDCDC;border: 1px solid #000000;border-radius: 12px; vertical-align: top;width: 240px;height: 180px;"> 
 
    <table width="100%"> 
 
    <tr> 
 
     <td bgcolor="#000000" height="15"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>f</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

あなたは外のスタイルを非表示にするoverflow: hiddenが必要親。

border-spacing: 0テーブルのデフォルトの間隔を削除する。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    background: #DCDCDC; 
 
    border: 1px solid #000000; 
 
    border-radius: 12px; 
 
    vertical-align: top; 
 
    width: 240px; 
 
    height: 180px; 
 
    overflow: hidden; 
 
} 
 

 
table { 
 
    border-spacing: 0; 
 
    width: 100%; }

<div> 
 
    <table> 
 
    <tr><td bgcolor="#000000" height="15"></td></tr> 
 
    <tr><td>f</td></tr> 
 
    </table> 
 
</div>