Html 嵌套表上的标题元素和100%宽度

我在包含子表元素的表上使用标题。 在caption元素中，我有一个div，包含两个链接，应该位于最上面的表的右边缘。 但一旦我定义了display:block；除位置外：相对位置；在标题上，它的大小缩小到第一个子表单元格的宽度

看

重要的CSS选择器：

table {
    width: 100%;
    margin-bottom: 1.8rem;
    border-collapse: collapse;
    border-spacing: 0;
}

caption {
    background: none repeat scroll 0 0 #F5F5F5;
    text-align: left;
    padding: 1rem 1.4rem;
    overflow: hidden;
}
/* Variations */
.caption-01 {
    position: relative;
}
.caption-02 {
    display: block;
    position: relative;
}
.caption-03 {
    display: table-header-group;
}

caption div {
    position: absolute;
    right: 0;
    text-align: right;
    top: 10px;
    width: 50%;
    white-space: nowrap;
}

在我的构造中，有没有一种方法可以让div位于标题的右边缘，并保持主表的全部宽度

---

提前感谢。

删除标题2和标题3中的显示属性

.caption-02 {
    position: relative;
}
.caption-03 {
}

---

为什么不删除display:block？你看过我的JSFIDLE了吗？位置：相对；仅绝对位置按钮不显示在标题中。@Mark实际上您的问题提出了另一个想法：给出表{position:relative；}。那就行了。我仍然觉得字幕显示不合适。更新您刚刚使用了我的第二条评论中的JSFIDLE…？！你的答案是什么？不，如果你去掉显示属性&表的位置：相对；没用了：@VolkerE。右-并添加位置：相对于表-就像我在我的。