Як створити таблицю лише за допомогою тегу <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/]
— vladimir
5
Я думаю, що причина, коли хтось хоче використовувати таблицю на основі 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", у вас є одна з двох проблем: або ви задаєте неправильне запитання, або намагаєтесь зробити неправильну справу.
— cHao
28
@cHao Якщо ви вважаєте, що це має бути відповідь, ігноруйте це, і нехай хтось, хто насправді хоче відповісти на питання, відповість на нього.
— Брайан Лейшман
14
@stumpx: Якщо я думаю, що на запитання не слід відповідати , я голосую за закриття - тому що питання навіть не повинно існувати. На всі дійсні запитання заслуговує відповіді. Але, як я сказав, іноді найправильніша відповідь - «не роби цього». Чи добре порадити когось, як вирішити неправильну проблему? Чи добре стояти простою, поки інші пропонують таку пораду? Я кажу ні.
— cHao
5
Якщо ви не знаєте, що у вашого дизайнера в голові, якщо залишити дані в структурі div, як вище, набагато краще, ніж залишити їх у таблиці. Краще означає, що легше перетворити з плаваючих div в таблиці, навпаки.
— anatoly techtonik
96

divs не слід використовувати для табличних даних. Це так само неправильно, як використання таблиць для компонування.
Використовуйте a <table>. Це легко, семантично правильно, і ви зробите це за 5 хвилин.

— Кобі
джерело
8
може залежати від програми. іноді те, що видається табличним, може бути лінійним, хоча роздвоєним. Наприклад, календарі можуть використовувати свої переваги як диви замість таблиць
— Dan
2
@Dann: Вони можуть мати переваги як список , але купа дівок семантично так само погана, як таблиця компонування.
— cHao
4
Є кілька причин, з яких ми просимо, щоб таблиця була призначена для DIV. Один з яких використовує тег таблиць у SharePoint 2007, щоб передати всі вмісти, які присутні на сторінці
— Shiva Komuravelly
2
@simplyletgo: Семантично було б доцільніше оформити клітинки таблиці як блоки, ніж намагатися змусити діви діяти як таблицю.
— cHao
1
чому ні? якщо ви використовуєте таблиці, ви не можете додати смугу прокрутки навколо певних комірок, щоб у вашій таблиці, наприклад, були заблоковані заголовки Excel. У таблиць дуже багато обмежень, чому цього не можна робити з дівами?
— pilavdzice
9

Це стара нитка, але я подумав, що я повинен розмістити своє рішення. Нещодавно я зіткнувся з тією самою проблемою, і я вирішив це шляхом дотримуючись трьох крокового підходу, як описано нижче, який дуже простий без складних CSS .

(ПРИМІТКА. Звичайно, для сучасних браузерів використання проблеми значення таблиці або рядка таблиці або комірки таблиці для атрибута відображення CSS вирішило б проблему. Але підхід, який я застосовував, буде однаково добре працювати в сучасних і старих браузерах, оскільки це не робить використовувати ці значення для відображення атрибута CSS.)

3-ЕТАП-ПРОСТИЙ ПІДХІД

Для таблиці лише з divs, щоб ви отримували комірки та рядки так само, як у елементі таблиці, використовуйте наступний підхід.

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

    комірка {дисплей: вбудований блок; ширина: 340 пікселів;}

  • Використовуйте CSS сучасних браузерів, як показано нижче.

    .table {дисплей: таблиця; } .row {display: table-row;} .cell {display: table-cell;}

— Суніл
джерело
1
Це не зробить, оскільки стовпці не однакового розміру.
— того
Ви маєте рацію щодо ширини, не так, як це відбувається в елементі таблиці. Однак якщо ви вкажете ширину для .cell класу в такому CSS, як .cell {width: 300px;}, ви можете досягти подібного ефекту. Але обмеження, про яке ви згадали, завжди буде існувати при використанні div, якщо ви не визначите ширину для CSS класу CSS. ІНШИЙ спосіб отримати той же ефект буде використовувати наступні класи: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </style> замість того, щоб використовувати класи, зазначені у відповіді вище.
— Суніль
@thatsIch, я додав ОНОВЛЕННЯ 1 у своїй відповіді, що пояснює вирішення питання про ширину, про яке ви згадали
— Суніль,
2

Використовуйте правильний тип doc; це вирішить проблему. Додайте рядок нижче у верхній частині вашого HTML-файлу:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— а Б В Г
джерело
2

Трохи 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

— Харійс Крутеніс
джерело
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 }

Ключовим фактором, щоб порожні клітинки та клітини взагалі були потрібного розміру, - це розмір ящиків та прокладка. Бордер також буде робити те ж саме, але створює рядок у ряду. Прокладка не робить. І, хоча я цього не пробував, я думаю, що Маржін буде діяти так само, як Padding, примушуючи і порожню клітинку правильно винести.

— E Чиста арка
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.