Как создать HTML-таблицу с несколькими строками в строке, используя тег <div> - PullRequest
Новая
       4

Как создать HTML-таблицу с несколькими строками в строке, используя тег <div>

1 голос
/ 15 марта 2012

Я знаю, как создать макет таблицы с тегами div.

Мне нужен эффективный способ построения таблицы из нескольких строк на одной строке с использованием тегов <div>, а не <table>теги, поскольку большое количество данных будет отображаться.

Вот что я хочу достичь:

enter image description here

Ответы [ 2 ]

2 голосов
/ 15 марта 2012

Вам не нужны divs. Просто используйте свойство rowspan: вот красивая стилизованная таблица для начала: 

<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th 
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td 
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td rowspan="2">Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</tr>
</table>
</body>
</html>
1 голос
/ 15 марта 2012

Я собираюсь согласиться со всеми и сказать, что таблицы почти всегда лучше для табличных данных. В частности, я никогда не слышал аргумент (и это не имеет особого смысла), что divs предпочтительнее для большого количества данных.

Однако, если вам нужно выполнить что-то подобное с помощью чистых div-ов, это довольно просто, если строки имеют фиксированные высоты. Просто организуйте «таблицу» в столбцы div. Затем присвойте каждой внутренней ячейке высоту, либо высоту строки, либо половину высоты.

http://jsfiddle.net/Wn56N/1/

...