Как создать таблицу только с помощью тега <div> и Css
Я хочу создать таблицу только с помощью тега <div> и CSS.
Это моя примерная таблица.
<body>
<form id="form1">
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">003</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
</form>
</body>
И стиль:
<style type="text/css">
.divTable
{
display: table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
background-color:#ccc;
}
</style>
Но эта таблица не работает с IE7 и ниже версии. Пожалуйста, дайте свое решение и идеи для меня.
Спасибо.
Ответы
Ответ 1
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
}
.div-table-col {
float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;
}
Runnable snippet:
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
}
.div-table-col {
float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;
}
<body>
<form id="form1">
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="center">Customer ID</div>
<div class="div-table-col">Customer Name</div>
<div class="div-table-col">Customer Address</div>
</div>
<div class="div-table-row">
<div class="div-table-col">001</div>
<div class="div-table-col">002</div>
<div class="div-table-col">003</div>
</div>
<div class="div-table-row">
<div class="div-table-col">xxx</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">www</div>
</div>
<div class="div-table-row">
<div class="div-table-col">ttt</div>
<div class="div-table-col">uuu</div>
<div class="div-table-col">Mkkk</div>
</div>
</div>
</form>
</body>
Ответ 2
div не следует использовать для табличных данных. Это так же неправильно, как использование таблиц для макета.
Используйте <table>. Его легко, семантически правильно, и вы закончите через 5 минут.
Ответ 3
Если что-то в <table> вам не нравится, возможно, вы можете использовать reset файл?
или
если вам нужно это для компоновки страницы, посмотрите примеры компоновки cssplay для проектирования веб-сайтов без таблиц.
Ответ 4
Использовать правильный тип документа; это решит проблему. Добавьте строку ниже в верхнюю часть вашего HTML файла:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Ответ 5
Это старый поток, но я думал, что должен опубликовать свое решение. Я столкнулся с той же проблемой в последнее время, и так, как я ее решил, следуя трехэтапному подходу, описанному ниже, который очень прост без сложного 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>
Ответ 6
Немного OFF-TOPIC, но может помочь кому-то для более чистого HTML...
CSS
.common_table{
display:table;
border-collapse:collapse;
border:1px solid grey;
}
.common_table DIV{
display:table-row;
border:1px solid grey;
}
.common_table DIV DIV{
display:table-cell;
}
HTML
<DIV class="common_table">
<DIV><DIV>this is a cell</DIV></DIV>
<DIV><DIV>this is a cell</DIV></DIV>
</DIV>
Работает в Chrome и Firefox
Ответ 7
При создании настраиваемого набора тегов макета, я нашел еще один ответ на эту проблему. Здесь представлен пользовательский набор тегов и их классы CSS.
HTML
<layout-table>
<layout-header>
<layout-column> 1 a</layout-column>
<layout-column> </layout-column>
<layout-column> 3 </layout-column>
<layout-column> 4 </layout-column>
</layout-header>
<layout-row>
<layout-column> a </layout-column>
<layout-column> a 1</layout-column>
<layout-column> a </layout-column>
<layout-column> a </layout-column>
</layout-row>
<layout-footer>
<layout-column> 1 </layout-column>
<layout-column> </layout-column>
<layout-column> 3 b</layout-column>
<layout-column> 4 </layout-column>
</layout-footer>
</layout-table>
CSS
layout-table
{
display : table;
clear : both;
table-layout : fixed;
width : 100%;
}
layout-table:unresolved
{
color : red;
border: 1px blue solid;
empty-cells : show;
}
layout-header, layout-footer, layout-row
{
display : table-row;
clear : both;
empty-cells : show;
width : 100%;
}
layout-column
{
display : table-column;
float : left;
width : 25%;
min-width : 25%;
empty-cells : show;
box-sizing: border-box;
/* border: 1px solid white; */
padding : 1px 1px 1px 1px;
}
layout-row:nth-child(even)
{
background-color : lightblue;
}
layout-row:hover
{ background-color: #f5f5f5 }
Ключом к получению пустых ячеек и ячеек в целом для правильного размера является Box-Sizing и Padding. Граница будет делать то же самое, но создает строку в строке. Отступы нет. И, хотя я этого не пробовал, я думаю, что Margin будет действовать так же, как и Padding, при форсировании и пустой ячейке, которая будет отображаться правильно.
