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

Question

我试图让表格 td 的黑色条一直延伸到 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>