如何将表格边框与div边框对齐

时间:2017-02-28 03:30:30

标签: html css

我正试图让桌子上的黑条一直延伸到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>

1 个答案:

答案 0 :(得分:2)

您需要overflow: hidden隐藏父母之外的样式。

border-spacing: 0删除表格的默认间距。

&#13;
&#13;
* {
  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%; }
&#13;
<div>
  <table>
    <tr><td bgcolor="#000000" height="15"></td></tr>
    <tr><td>f</td></tr>
  </table>
</div>
&#13;
&#13;
&#13;