Born2DoubleUp Born2DoubleUp -4 years ago 109
CSS Question

How to align table border with div border

I'm trying to make the black bar from the table td reach out all the way to the black border of the div. what am I doing wrong? I've been messing around with this for a while now and its starting to get to me. :( I've included all the css and html below. Hopefully someone can give me a hand with this. Thanks in advance!



<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 Source

You need overflow: hidden to hide the style outside of the parent.

border-spacing: 0 to remove the default spacing of the table.

* {
  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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download