Как создать таблицу только используя тег <div> и Css

182

Я хочу создать таблицу только с использованием <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 и ниже версии. Пожалуйста, дайте ваше решение и идеи для меня. Спасибо.

html  css 
— Кумара
источник
взгляните на эту статью
— tanathos
32
почему вы хотите использовать divдля создания таблицы?
— хай
3
см. хорошую статью «Являются ли таблицы CSS лучше таблиц HTML?» [ vanseodesign.com/css/tables/]
— Владимир
5
Я думаю, что причина, по которой кто-то хочет использовать таблицу на основе div вместо обычной таблицы, заключается в том, что .... рендеринг / animations / reflows для таблицы на основе div на самом деле быстрее (особенно для большого размера DOM), чем рендеринг обычной таблицы. ..... смотрите это .... stubbornella.org/content/2009/03/27/… это .... developer.nokia.com/community/wiki/… выше, что все плагины JavaScript интенсивного использования данных, такие как slickgrid и т.д. используйте divBasedtable
— bhavya_w
1
@ huy Вероятно, потому что divs более гибкие, чем таблицы!
— Кай Ноак

Ответы:

262 
.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;  
}

Запускаемый фрагмент:

Показать фрагмент кода

— Шива Комуравеллы
источник
224
Спасибо! Кто-то, кто действительно ответил на его вопрос, а не просто сказал, что «это глупая идея». Я ненавижу, когда люди не отвечают на вопросы ... Если он спросил, на это нужно ответить
— Брайан Лейшман
23
@stumpx: Иногда правильный ответ - «не делай этого». Это как-раз тот случай. Когда вам нужно спросить «как мне составить таблицу, используя divs и CSS», у вас возникает одна из двух проблем: либо вы задаете неправильный вопрос, либо пытаетесь сделать неправильную вещь.
— Цао
28
@cHao Если вы думаете, что это должен быть ответ, тогда игнорируйте его и позвольте кому-то, кто действительно хочет ответить на вопрос, ответить на него.
— Брайан Лейшман
14
@stumpx: Если я думаю, что на вопрос не следует отвечать , я голосую, чтобы закрыть - потому что вопрос даже не должен существовать. Все действительные вопросы заслуживают ответа. Но, как я уже сказал, иногда самый правильный ответ - «не делай этого». Хорошо ли советовать кому-то, как решить не ту проблему? Хорошо ли оставаться в стороне, пока другие дают такой совет? Я говорю нет.
— Цао
5
Если вы не знаете, что у вашего дизайнера в голове, лучше оставить данные в структуре div, как в примере выше, чем оставить их в таблице. Лучше означает, что легче конвертировать из плавающих div в таблицы, и наоборот.
— анатолий техтоник
96

divs не должен использоваться для табличных данных. Это так же неправильно, как использовать таблицы для разметки.
Используйте <table>. Это легко, семантически правильно, и вы будете готовы через 5 минут.

— Коби
источник
8
может зависеть от приложения, хотя. иногда то, что кажется табличным, может быть линейным, хотя и разделенным. Например, календари могут иметь свои преимущества в виде div вместо таблиц
— Dan
2
@Dann: Они могут иметь преимущества в виде списка , но куча div семантически так же плоха, как таблица макетов.
— Чао
4
Есть несколько причин, по которым мы просим, ​​чтобы таблица не соответствовала DIV. Одним из них является использование табличного тега в SharePoint 2007, чтобы испортить все содержимое, присутствующее на странице
— Шива Комуравелли
2
@simplyletgo: Семантически, было бы более уместно стилизовать ячейки таблицы как блоки, чем пытаться заставить div работать как таблица.
— cHao
1
почему нет? если вы используете таблицы, вы не можете добавить полосу прокрутки вокруг определенных ячеек, например, чтобы у вашей таблицы были заблокированные заголовки, похожие на excel. Таблицы имеют много ограничений, почему это нельзя сделать с помощью div?
— Pilavdzice
9

Это старая ветка, но я решил опубликовать свое решение. Недавно я столкнулся с той же проблемой, и я решил ее, следуя трехэтапному подходу, описанному ниже, который очень прост без какого-либо сложного CSS .

(ПРИМЕЧАНИЕ. Конечно, для современных браузеров использование значения атрибута CSS таблицы или строки таблицы или ячейки таблицы для отображения может решить проблему. Но подход, который я использовал, будет одинаково хорошо работать в современных и старых браузерах, поскольку он не используйте эти значения для отображения атрибута CSS.)

3-х шаговый простой подход

Для таблицы только с элементами div, поэтому вы получаете ячейки и строки, как в элементе таблицы, используйте следующий подход.

  1. Замените элемент таблицы на блок div (используйте .tableкласс)
  2. Замените каждый элемент tr или th блоком div (используйте .rowкласс)
  3. Замените каждый элемент 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класса

    cell {display: inline-block; ширина: 340px;}

  • Используйте CSS современных браузеров, как показано ниже.

    .table {display: table; } .row {display: table-row;} .cell {display: table-cell;}

— Сунил
источник
1
Это не будет делать, так как столбцы не одного размера.
— вот
Вы правы в том, что ширина не ведет себя так, как в элементе таблицы. Однако, если вы укажете ширину для класса .cell в его CSS, например .cell {width: 300px;}, вы сможете добиться аналогичного эффекта. Но ограничение, которое вы упомянули, всегда будет при использовании div, если вы не определите ширину CSS-класса ячейки. ДРУГОЙ способ получить тот же эффект - использовать следующие классы: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </ style> вместо использования классов, упомянутых в ответе выше.
— Сунил
@thatsIch, я добавил ОБНОВЛЕНИЕ 1 в своем ответе, который объясняет обходной путь для проблемы ширины, о котором вы упоминали
— Сунил
2

Используйте правильный тип документа; это решит проблему. Добавьте строку ниже в начало вашего HTML-файла:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— ABCD
источник
2

Немного вне темы, но может помочь кому-то для более чистого 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

— Харийс Крутейнис
источник
2
А если в ячейках вашей таблицы есть <div>элементы? Вы, вероятно, хотите.common_table div > div
— vol7ron
2

Создавая собственный набор тегов макета, я нашел другой ответ на эту проблему. Здесь представлен пользовательский набор тегов и их 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, в принудительном и пустом отображении ячеек.

— E Net Arch
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.