Html 为嵌套div创建圆角

我正在尝试使用div为我的响应表创建圆角，但是div的顶部没有被圆角

这是我当前预览的样子：

完整代码：

我的HTML结构：

<div class="coltable">
<div class="col">
    <h4>Name</h4>
    <p>John</p>
</div>
<div class="col">
    <h4>Title</h4>
    <p>Manager</p>
</div>

名称
约翰

标题
经理

---

我想要实现的是圆角（顶部边框还没有圆角）。如何修复此问题？

您需要根据

h4

元素所在的列对其进行舍入。例如：

.coltable .col h4 {
    margin: 0;
    padding: .75rem;
    border-bottom: 2px solid #dee2e6;
    background-color: blue;
    padding-left: 40px;
    color: #fff;
    border-radius: 10px 0 0 0; // add this to your code
}

.coltable .col:last-child h4 {
  border-radius: 0 10px 0 0;
}

这些值表示每个角，从左上角开始，顺时针旋转

我通过使用

last child

pseudo以右栏为目标；如果您添加额外的第三列，它仍然可以工作

---

这里有一个更新的fiddle:

您需要根据

h4

元素所在的列对其进行舍入。例如：

.coltable .col h4 {
    margin: 0;
    padding: .75rem;
    border-bottom: 2px solid #dee2e6;
    background-color: blue;
    padding-left: 40px;
    color: #fff;
    border-radius: 10px 0 0 0; // add this to your code
}

.coltable .col:last-child h4 {
  border-radius: 0 10px 0 0;
}

这些值表示每个角，从左上角开始，顺时针旋转

我通过使用

last child

pseudo以右栏为目标；如果您添加额外的第三列，它仍然可以工作

---

这里有一个更新的提琴：

如果您使用的是Bootstrap 4，您可以将类“rounded”添加到您的div中

e.g "<div class="coltable rounded">

HTML:

请记住，如果您使用的是外部CSS，则必须在中链接到您的CSS文件
您的文档的标签。

如果您使用的是Bootstrap 4，则可以将类“rounded”添加到div中

e.g "<div class="coltable rounded">

HTML:

请记住，如果您使用的是外部CSS，则必须在中链接到您的CSS文件
您的文档的标签。

您的内部内容当前已溢出且可见。您需要添加CSS属性

overflow:hidden

所以它会像：

.coltable {
....
overflow: hidden;
}

---

这样，无论您添加了多少个内部项目，它都将始终在顶部和底部四舍五入。

您的内部内容当前已溢出且可见。您需要添加CSS属性

overflow:hidden

所以它会像：

.coltable {
....
overflow: hidden;
}

---

这样，无论您添加多少个内部项，它都将始终在顶部和底部四舍五入。

添加

溢出：隐藏

进入

.coltable

类

---

您的div

.col

类与您的

.coltable

div重叠。

添加

溢出：隐藏

进入

.coltable

类

---

您的div

.col

类与您的

.coltable

div重叠。

谢谢您的帮助。但是，它在响应能力方面存在问题。每当我调整它的大小时，桌子的右角就被切断了。他没有使用桌子来进行布局或造型。是的，我重新阅读了这篇文章，犯了一个错误！我已经更新了小提琴并在手机上进行了分类Kim@Rob我的意思是“div”表不是真正的@kimgray如果你有表格数据，使用一个表而不是div，但是他最初的回答就像你在使用

。谢谢你的帮助。但是，它在响应能力方面存在问题。每当我调整它的大小时，桌子的右角就被切断了。他没有使用桌子来进行布局或造型。是的，我重新阅读了这篇文章，犯了一个错误！我已经更新了小提琴并在手机上进行了分类Kim@Rob我的意思是“div”表不是真正的@kimgray如果你有表格数据，使用一个表而不是div，但是他最初的回答就像你在使用

。嗨，谢谢你的回复。不过，我可以通过添加溢出：隐藏到我的外部div来解决角落问题。我感谢您花时间帮助我：）嗨，谢谢您的回复。不过，我只需将overflow:hidden添加到我的外部div，就可以解决这个问题。非常感谢您抽出时间帮助我：）