Yalnızca <div> etiketi ve Css kullanarak tablo oluşturma

182

Yalnızca <div>tag ve CSS kullanarak tablo oluşturmak istiyorum .

Bu benim örnek masam.

<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>

Ve Stil:

<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>

Ancak bu tablo IE7 ve altındaki sürümlerle çalışmaz.Lütfen çözümünüzü ve fikirlerinizi benim için verin. Teşekkürler.

html css

— Kumara
kaynak

bu makaleye

— tanathos

32

neden divbir tablo oluşturmak için kullanmak istiyorsunuz ?

— huy

3

'CSS Tabloları HTML Tablolarından Daha mı İyi?' başlıklı iyi makaleye bakın [ Vanseodesign.com/css/tables/]

— vladimir

5

Herkes normal bir tablo yerine div tabanlı bir tablo kullanmak istediğiniz nedeni .... div / tabanlı bir tablo oluşturma / animasyonlar / reflows aslında normal bir tablo oluşturma daha hızlı (özellikle büyük DOM boyutu için) olmasıdır. ..... şuna bakın .... stubbornella.org/content/2009/03/27/… bu .... geliştirici.nokia.com/ community/wiki/… slickgrid gibi tüm veri yoğun javascript eklentilerinin üstünde vb divBasedtable kullanın

— bhavya_w

1

çünkü Muhtemelen @huy divler daha fazladır esnek tablolar daha mümkün!

— Kai Noack

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

Çalıştırılabilir snippet:

Kod snippet'ini göster

.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>

Snippet'i genişlet

— Shiva Komuravelly
kaynak

224

Teşekkür ederim! Sorusunu gerçekten cevaplayan ve sadece "bu aptalca bir fikir" demeyen biri. İnsanlar soruları cevaplamadığında nefret ediyorum ... Eğer

— Brian Leishman

23

@stumpx: Bazen doğru cevap "yapma". Bu o zamanlardan biri. "Div ve CSS kullanarak nasıl tablo oluşturabilirim?" Sorusunu sormanız gerektiğinde, iki sorundan birini yaşarsınız: Ya yanlış soruyu soruyorsunuz ya da yanlış şeyi yapmaya çalışıyorsunuz.

— cHao

28

@cHao Bunun cevap olması gerektiğini düşünüyorsanız, görmezden gelin ve soruyu cevaplamak isteyen birisinin cevap vermesine izin verin.

— Brian Leishman

14

@stumpx: Eğer sorunun cevaplanmaması gerektiğini düşünüyorsam, kapanmaya oy veriyorum - çünkü soru var olmamalı. Tüm geçerli sorular bir cevabı hak ediyor. Ama dediğim gibi, bazen en doğru cevap "yapma". Birisine yanlış sorunun nasıl çözüleceği konusunda tavsiyede bulunmak iyi midir? Diğerleri bu tür tavsiyelerde bulunurken boş durmak iyi mi? Hayır diyorum.

— cHao

5

Tasarımcınızın kafasında ne olduğunu bilmiyorsanız, yukarıdaki gibi div yapısında veri bıraktığınızda, bunları tabloda bırakmak çok daha iyidir. Daha iyi, kayan div'lerden tersi tablolara dönüştürmenin daha kolay olduğu anlamına gelir.

— anatoly techtonik

96

divsekmeli veriler için kullanılmamalıdır. Bu, düzen için tabloları kullanmak kadar yanlıştır.
A kullanın <table>. Kolay, anlamsal olarak doğru ve 5 dakika içinde bitireceksiniz.

— Kobi
kaynak

8

olsa da uygulamaya bağlı olabilir. bazen tablo şeklinde görünen şeyler bölünmüş olsa da doğrusal olabilir. Örneğin takvimler, bunun yerine tablolar olarak div olarak yararlanabilir

— Dan

2

@Dann: Liste olarak faydaları olabilir , ancak bir grup div semantik olarak bir düzen tablosu kadar kötüdür.

— cHao

4

tablonun DIV'lerle ayrılmasını istediğimiz birkaç neden var. Bunlardan biri SharePoint 2007'de tablo etiketi kullanıyor Sayfada bulunan her içeriği

— berbat

2

@simplyletgo: Anlamsal olarak, div hücrelerini tablo gibi davranmaya çalışmaktan ziyade tablo hücrelerini bloklar olarak biçimlendirmek daha uygun olur.

— cHao

1

neden olmasın? tablo kullanırsanız, tablonuzda excel benzeri kilitli başlıklar olması için belirli hücrelerin çevresine kaydırma çubuğu ekleyemezsiniz. Tablolarda çok fazla sınırlama var, neden div ile yapılamıyor?

— pilavdzice

9

Bu eski bir iş parçacığı, ama benim çözüm göndermek gerektiğini düşündüm. Son zamanlarda aynı problemle karşılaştım ve çözdüğüm yol, aşağıda belirtildiği gibi karmaşık bir CSS olmadan çok basit olan üç aşamalı bir yaklaşımı takip etmektir .

(NOT: Elbette, modern tarayıcılar için, tablo CSS özniteliği için tablo veya tablo satırı veya tablo hücresi değerlerini kullanmak sorunu çözecektir. Ancak kullandığım yaklaşım, modern ve eski tarayıcılarda eşit derecede iyi çalışacaktır çünkü bu değerleri display CSS özelliği için kullanın.)

3 ADIM BASİT YAKLAŞIM

Yalnızca div içeren tablolar için, bir tablo öğesinde olduğu gibi hücreleri ve satırları almak için aşağıdaki yaklaşımı kullanın.

Tablo öğesini bir blok div ile değiştirin (bir .tablesınıf kullanın )
Her tr veya th öğesini bir blok div ile değiştirin (bir .rowsınıf kullanın )
Her td öğesini bir satır içi blok div ile değiştirin (bir .cellsınıf kullanın )

.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>

Snippet'i genişlet

GÜNCELLEME 1

Bir yorumda belirtildiği gibi bir sütunun tüm hücreleri arasında korunmayan aynı genişliğin etkisini gidermek için thatslch, aşağıdaki iki yaklaşımdan herhangi biri benimsenebilir.

cellSınıf için bir genişlik belirtme

hücre {display: satır içi blok; en: 340px;}
Modern tarayıcıların CSS'sini aşağıdaki gibi kullanın.

.table {display: tablo; } .row {display: tablo satırı;}. hücre {display: tablo hücresi;}

— Sunil
kaynak

1

Sütunlar aynı boyutta olmadığından bunu yapmayacaksınız.

— 17'de

Bir tablo öğesinde olduğu gibi davranmama genişliği konusunda haklısınız. Ancak, .cell sınıfı için CSS'de .cell {width: 300px;} gibi bir genişlik belirtirseniz, benzer bir etki elde edebilirsiniz. Ancak, hücre CSS sınıfı için bir genişlik tanımlamazsanız, div kullanırken bahsettiğiniz sınırlama her zaman orada olacaktır. Aynı etkiyi elde etmenin başka bir yolu şu sınıfları kullanmak olacaktır: <style> .table {display: table; Yukarıdaki yanıtta belirtilen sınıfları kullanmak yerine} .row {display: table-row;} .cell {display: table-cell;} </style>.

— Sunil

@thatsIch, cevabımda, bahsettiğiniz genişlik sorunu için geçici çözümü açıklayan UPDATE 1'i ekledim

— Sunil

4

Eğer <table>sevmediğiniz bir şey varsa , belki sıfırlama dosyasını kullanabilirsiniz ?

veya

sayfanın düzeni için buna ihtiyacınız varsa , tabloları olmayan web siteleri tasarlamak için cssplay düzeni örneklerine göz atın .

— Urszula Karzelek
kaynak

3

Grid-Css dikkate alındığında herhangi bir cevap görmüyorum. Çok zarif bir yaklaşım olduğunu düşünüyorum: grid-css satır ve sütun aralıklarını bile destekler. Burada çok iyi bir makale bulabilirsiniz:

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

— Zardo
kaynak

2

Doğru belge türünü kullanın; sorunu çözecektir. HTML dosyanızın üst kısmına aşağıdaki satırı ekleyin:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

— abcd
kaynak

2

Biraz OFF-TOPIC, ancak daha temiz bir HTML için birine yardımcı olabilir ... 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 ve Firefox'ta çalışır

— Harijs Krūtainis
kaynak

2

Ve eğer tablo hücrelerinizde <div>elemanlar varsa ? Muhtemelen istiyorsun.common_table div > div

— vol7ron

2

Özel bir düzen etiketi kümesi oluştururken, bu soruna başka bir cevap buldum. Burada özel etiket kümesi ve CSS sınıfları sağlanmıştır.

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 }

Boş hücrelerin ve hücrelerin genel olarak doğru boyutta olmasının anahtarı Kutu Boyutlandırma ve Dolgu'dur. Kenarlık da aynı şeyi yapar, ancak satırda bir çizgi oluşturur. Dolgu yapmaz. Ve ben denememişken, bence Margin Padding ile aynı şekilde hareket edecek, zorla ve boş hücre düzgün bir şekilde işlenecek.

— E Net Kemer
kaynak