Это старая ветка, но я решил опубликовать свое решение.Недавно я столкнулся с той же проблемой, и я решил ее, следуя трехстадийному подходу , как описано ниже , который очень прост без какого-либо сложного CSS .
(ПРИМЕЧАНИЕ. Конечно, для современных браузеров использование значений таблицы или строки таблицы или ячейки таблицы для отображения атрибута CSS решит проблему. Но подход, который я использовал, будет одинаково хорошо работать в современных иболее старые браузеры, поскольку они не используют эти значения для отображения атрибута CSS.)
3-ШАГОВЫЙ ПРОСТОЙ ПОДХОД
Только для таблицы с элементами div, поэтому вы получаете только ячейки и строкикак и в элементе таблицы, используйте следующий подход.
- Замените элемент таблицы на блок div (используйте класс
.table) - Замените каждый элемент tr или th на блок div(используйте класс
.row) - Замените каждый элемент td на встроенный блок div (используйте класс
.cell)
.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}
<h2>Table below using table element</h2>
<table cellspacing="0" >
<tr>
<td>Mike</td>
<td>36 years</td>
<td>Architect</td>
</tr>
<tr>
<td>Sunil</td>
<td>45 years</td>
<td>Vice President aas</td>
</tr>
<tr>
<td>Jason</td>
<td>27 years</td>
<td>Junior Developer</td>
</tr>
</table>
<h2>Table below is using Divs only</h2>
<div class="table">
<div class="row">
<div class="cell">
Mike
</div>
<div class="cell">
36 years
</div>
<div class="cell">
Architect
</div>
</div>
<div class="row">
<div class="cell">
Sunil
</div>
<div class="cell">
45 years
</div>
<div class="cell">
Vice President
</div>
</div>
<div class="row">
<div class="cell">
Jason
</div>
<div class="cell">
27 years
</div>
<div class="cell">
Junior Developer
</div>
</div>
</div>
ОБНОВЛЕНИЕ 1
Чтобы обойти эффект одинаковой ширины, который не поддерживается во всех ячейках столбца, какупомянутый thatslch в комментарии, можно принять любой из двух подходов ниже.
Укажите ширину для cell class
cell {display: inline-блок;ширина: 340px;}
Используйте CSS современных браузеров, как показано ниже.
.table {display: table;} .row {display: table-row;} .cell {display: table-cell;}