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

问：

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

html css （英语

评论

0赞 pol 2/28/2017

你用桌子只是为了制作黑色边框吗？

0赞 NoelB 2/28/2017

我认为，如果您可以发布您要实现的最终结果的简单模型，那就太好了。

答：

2赞 hdotluna 2/28/2017 #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>

评论

0赞 Born2DoubleUp 2/28/2017

谢谢，这正是我想要的。我记得出于某种原因，我以另一种方式这样做。=)

上一个：显示隐藏的 div 并关闭其他 div，以便一次显示 1 个

下一个：显示通过搜索查询找到的列