Элемент заголовка и ширина 100 % во вложенных таблицах

Я использую caption для table, который включает элементы дочерней таблицы. В элементе заголовка у меня есть div вкл. две ссылки, которые должны быть на правом краю самой верхней таблицы.
Но как только я определяю display: block; помимо position: relative; в заголовке, его размер уменьшается до ширины первой ячейки дочерней таблицы.

См. http://jsfiddle.net/Volker_E/zjFmv/.

Важные селекторы 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 находился на правом краю заголовка при полной ширине основной таблицы в моей конструкции?

Заранее спасибо.


person Volker E.    schedule 09.06.2013    source источник
comment
почему бы тебе не удалить display:block   -  person Mark    schedule 09.06.2013
comment
Вы заглянули в мой jsfiddle? Только с position: relative; кнопки с абсолютным позиционированием не отображаются в заголовке.   -  person Volker E.    schedule 09.06.2013
comment
@Mark На самом деле ваш вопрос вызвал еще одну идею: дать table { position: relative; }. Тогда это работает. Отображение титров мне кажется неправильным. Обновлен jsfiddle.net/Volker_E/zjFmv/5.   -  person Volker E.    schedule 09.06.2013


Ответы (1)


Удалите свойства отображения формы заголовка 2 и 3

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

Jsfiddle

person Mark    schedule 09.06.2013
comment
Вы только что использовали мой jsfiddle из моего второго комментария…?! Какова ваша часть ответа? - person Volker E.; 09.06.2013
comment
Нет, если удалить display свойства и position: relative; таблицы, они не будут работать: jsfiddle .net/Volker_E/zjFmv/6 - person Volker E.; 10.06.2013
comment
@ВолкерЕ. правильно - и добавьте position:relative к table - как у меня в моем Jsfiddle, и это должно сработать. - person Mark; 10.06.2013