Заголовок HTML-таблицы как часть строки заголовка

Question

Я хотел бы создать строку заголовка таблицы, которая включает заголовок слева, а также «Sample header» справа. Для доступности и для семантической корректности название должно быть в теге <caption>, но «Sample header» не является частью заголовка, поэтому, вероятно, он не должен находиться внутри <caption>. Подпись не может быть внутри строки, поскольку она должна быть первым элементом после <table>.

Вот HTML структура:

<table> 
    <caption>Caption</caption> 
    <thead> 
     <tr class="sample"> 
      <th colspan="2">Sample header</th> 
     </tr> 
     <tr> 
      <th>Column1</th> 
      <th>Column2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Data1</td> 
      <td>Data2</td> 
     </tr> 
    </tbody> 
</table> 

Надпись заканчивается отдельной строкой над столом, в то время как я хотел бы, чтобы это было на той же линии, как «Образец заголовка».

Вот пример того, чего я пытаюсь достичь: http://jsfiddle.net/vueLL5ce/5/. Он устанавливает положение «caption» в относительном и вручную перемещает его туда, где я хочу. Две основные проблемы с этим подходом состоят в том, что изменение положения надписи все еще оставляет свое первоначальное пространство над таблицей, и я работаю с пикселями, которые различаются между браузерами, поэтому он не обязательно правильно выстраивается.

Есть ли хороший способ достичь этого? Я застрял с включением информации заголовка внутри <caption> (и стиль, похожий на строку таблицы) или создание обычной строки таблицы, а не с использованием <caption>?

Answer 1

Я думаю, что нашел кросс-браузерное решение. Ключ должен установить line-height: 0 (обычный 0 не работает в IE6, но мне не нужно его поддерживать). Firefox также не позволил мне переместить подпись напрямую, поэтому мне пришлось добавить еще span. Мне все еще не нравится иметь дело с пикселями напрямую, поэтому любые предложения по этому поводу были бы замечательными.

Fiddle: http://jsfiddle.net/vueLL5ce/8/

HTML:

<div> 
    <table> 
     <caption><span>Caption</span></caption> 
     <thead> 
      <tr class="captionRow"> 
       <th colspan="2">Sample header</th> 
      </tr> 
      <tr> 
       <th>Column1</th> 
       <th>Column2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Data1</td> 
       <td>Data2</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

CSS:

div { 
    background-color: #FFFFDD; 
} 

table { 
    border: solid 1px Black; 
    width: 100%; 
} 

table caption { 
    line-height: 0; 
    text-align: left; 
} 

table caption span { 
    position: relative; 
    left: 4px; 
    top: 14px; 
} 

table th { 
    background-color: #CCC; 
} 

.captionRow th { 
    text-align: right; 
} 

Answer 2

Перемещение цвета фона из div в стол, и оно должно удалить цвет сверху. Смотри прилагаемую скрипку here

table { 
border: solid 1px Black; 
width: 100%; 
background-color: #FFFFDD; 

}

Я хотел бы удалить заголовок, используйте голову колонки и отделить два элемента с там собственный класс и выровняйте их в CSS. Обновлен пример here Таким образом, у вас нет проблемы с интервалом.