css выравнивать таблицу строк по-разному, не используя другую таблицу

Question

Есть ли способы не выровнять ячейки таблицы? Я хочу, чтобы мой заголовок быть между таблицей, имеющим что-то вроде

------------- 
| | A | B | | 
------------- 
| | | | 
------------- 
| | | | 
------------- 

Во всяком случае, чтобы сделать это без использования два или таблицы с помощью DIV вместо таблицы?

Я пытался что-то на скрипке, но это не работает, первый стол, что я хочу, чтобы выглядеть, но без использования двух таблиц http://jsfiddle.net/nA3DL/

заранее спасибо

Answer 1

Вы можете установить положение относительно на заголовках, и переместите их влево:

table.test th{ 
    width:100px; 
    position: relative; 
    left: -50px; 
} 
table.test th.half{ 
    visibility: hidden; 
} 

fiddle

Answer 2

Вы могли бы используйте несортированные списки, но я не уверен, сколько данных вы собираетесь показывать в своей таблице. Может быть, много работы, но если это будет только ваш заголовок таблицы, который будет выглядеть по-другому, это может быть способ сделать это:

CSS:

.table { 
    width: 500px; 
} 

.table ul { 
    list-style: none; 
    display: table; 
    width: 100%; 
    text-align: center; 
    margin: 0; 
} 

.table ul li { 
    display: table-cell; 
    border: 1px solid black; 
} 

.table ul li.small { 
    width: 50px; 
} 

.table ul li.big { 
    width: 20%; 
} 

HTML:

<div class="table"> 
    <ul> 
     <li class="small"></li> 
     <li>Header</li> 
     <li>Header</li> 
     <li>Header</li> 
     <li>Header</li> 
     <li class="small"></li> 
    </ul> 
    <ul> 
     <li class="big">Data</li> 
     <li class="big">Data</li> 
     <li class="big">Data</li> 
     <li class="big">Data</li> 
     <li class="big">Data</li> 
    </ul> 
</div> 

Вот скрипку: http://jsfiddle.net/3dpnX/2/