วิธีสร้างตารางโดยใช้แท็ก <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 
— Kumara
แหล่งที่มา
ลองดูที่บทความนี้
— tanathos
32
เหตุใดคุณต้องการใช้divเพื่อสร้างตาราง
— huy
3
ดูบทความที่ดี 'CSS Tables ดีกว่า HTML Tables หรือไม่' [ vanseodesign.com/css/tables/]
— vladimir
5
ฉันคิดว่าเหตุผลที่ทุกคนต้องการใช้ตารางที่ใช้ div แทนตารางปกติก็คือ .... การเรนเดอร์ / แอนิเมชั่น / การรีโฟลว์บนโต๊ะที่ใช้ div นั้นเร็วกว่าจริง ๆ (โดยเฉพาะสำหรับขนาด DOM ขนาดใหญ่) ..... เห็นสิ่งนี้ .... stubbornella.org/content/2009/03/27/…อันนี้ .... developer.nokia.com/community/wiki/…ข้างบนนั้นปลั๊กอิน javascript ที่เข้มข้นเช่น slickgrid etc ใช้ divBasedtable
— bhavya_w
1
@huy อาจเป็นเพราะdivs ยืดหยุ่นกว่าโต๊ะได้!
— 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;  
}

ตัวอย่างโค้ดที่รันได้:

แสดงตัวอย่างโค้ด

— พระอิศวร Komuravelly
แหล่งที่มา
224
ขอบคุณ! คนที่ตอบคำถามของเขาจริงและไม่เพียง แต่พูดว่า "นั่นเป็นความคิดที่โง่" ฉันเกลียดเมื่อคนไม่ตอบคำถาม ... ถ้าเขาถามมันควรจะตอบ
— Brian Leishman
23
@stumpx: บางครั้งคำตอบที่ถูกต้องก็คือ "อย่าทำอย่างนั้น" นี่คือหนึ่งครั้ง เมื่อคุณต้องถามว่า "ฉันจะสร้างตารางโดยใช้ divs และ CSS" ได้อย่างไรคุณมีหนึ่งในสองปัญหา: คุณกำลังถามคำถามผิดหรือคุณพยายามทำสิ่งที่ผิด
— cHao
28
@cHao หากคุณคิดว่าควรเป็นคำตอบให้ละเว้นและปล่อยให้คนที่ต้องการตอบคำถามนั้นตอบ
— Brian Leishman
14
@stumpx: ถ้าฉันคิดว่าคำถามไม่ควรตอบฉันลงคะแนนให้ปิด - เพราะคำถามนั้นไม่ควรมีอยู่ คำถามที่ถูกต้องทั้งหมดควรได้รับคำตอบ แต่อย่างที่ฉันพูดบางครั้งคำตอบที่ถูกต้องที่สุดคือ "อย่าทำ" มันเป็นการดีที่จะแนะนำคนในวิธีการแก้ปัญหาที่ผิดหรือเปล่า? เป็นการดีที่จะยืนเฉยในขณะที่คนอื่นเสนอคำแนะนำดังกล่าวหรือไม่ ฉันบอกว่าไม่.
— cHao
5
หากคุณไม่ทราบว่านักออกแบบของคุณมีส่วนร่วมในเรื่องใดเมื่อออกจากข้อมูลในโครงสร้าง div เช่นด้านบนจะดีกว่ามากหากปล่อยไว้ในตาราง ดีกว่าหมายความว่าง่ายกว่าที่จะแปลงจาก divs ลอยตัวเป็นตารางที่ในทางกลับกัน
— Anatoly techtonik
96

divไม่ควรใช้สำหรับข้อมูลแบบตาราง นั่นเป็นสิ่งที่ผิดเช่นเดียวกับการใช้ตารางสำหรับการจัดวาง การใช้งาน
<table>มันง่ายถูกต้องเชิงความหมายและคุณจะทำได้ใน 5 นาที

— Kobi
แหล่งที่มา
8
ขึ้นอยู่กับแอพพลิเคชั่น บางครั้งสิ่งที่ปรากฏเป็นตารางอาจเป็นแบบเชิงเส้นแม้ว่าจะแยก ตัวอย่างเช่นปฏิทินสามารถรับผลประโยชน์เป็น div แทนตารางได้
— Dan
2
@Dann: พวกเขาอาจมีประโยชน์เป็นรายการแต่กลุ่ม divs มีความหมายไม่ดีเท่าตารางเลย์เอาต์
— cHao
4
มีสาเหตุหลายประการที่เราขอให้โต๊ะถูกปฏิเสธด้วย DIV หนึ่งในนั้นคือการใช้แท็กตารางใน SharePoint 2007 ทำให้เนื้อหาทุกอย่างที่มีอยู่ในหน้า
— ยุ่งเหยิง
2
@simplyletgo: ความหมายมันจะเหมาะสมกว่าที่จะจัดสไตล์เซลล์ตารางเป็นบล็อกมากกว่าที่จะพยายามทำให้ div ดำเนินการเหมือนตาราง
— cHao
1
ทำไมจะไม่ล่ะ? หากคุณใช้ตารางคุณจะไม่สามารถเพิ่มแถบเลื่อนรอบเซลล์บางแห่งเพื่อให้ตารางของคุณมีส่วนหัวที่ล็อคเหมือน excel เช่น ตารางมีข้อ จำกัด มากมายเหตุใดจึงไม่สามารถทำได้ด้วย div
— pilavdzice
9

นี่เป็นหัวข้อเก่า แต่ฉันคิดว่าฉันควรโพสต์โซลูชันของฉัน ผมประสบปัญหาเดียวกันเมื่อเร็ว ๆ นี้และวิธีที่ฉันจะแก้ไขมันเป็นโดยทำตามวิธีการขั้นตอนที่สามตามที่ระบุไว้ด้านล่างซึ่งเป็นง่ายมากโดยไม่ต้อง CSS

(หมายเหตุ: แน่นอนสำหรับเบราว์เซอร์สมัยใหม่การใช้ค่าของตารางหรือตารางแถวหรือตารางเซลล์สำหรับแอตทริบิวต์ CSS ที่แสดงจะแก้ปัญหาได้ แต่วิธีการที่ฉันใช้จะทำงานได้ดีเท่า ๆ กันในเบราว์เซอร์รุ่นเก่าและรุ่นเก่า ใช้ค่าเหล่านี้เพื่อแสดง CSS คุณสมบัติ)

แนวทาง 3 ขั้นตอนง่าย ๆ

สำหรับตารางที่มี div เท่านั้นดังนั้นคุณจะได้รับเซลล์และแถวเหมือนในองค์ประกอบตารางใช้วิธีการต่อไปนี้

  1. แทนที่องค์ประกอบตารางด้วย div block (ใช้ .tableคลาส)
  2. แทนที่แต่ละองค์ประกอบ tr หรือ th ด้วย div 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คลาส

    เซลล์ {display: inline-block; ความกว้าง: 340px;}

  • ใช้ CSS ของเบราว์เซอร์ที่ทันสมัยดังต่อไปนี้

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

— นิล
แหล่งที่มา
1
สิ่งนี้จะไม่ทำเนื่องจากคอลัมน์มีขนาดไม่เท่ากัน
— นั่นคือ
คุณมีความถูกต้องเกี่ยวกับความกว้างที่ไม่ได้ทำงานเหมือนกับองค์ประกอบในตาราง อย่างไรก็ตามหากคุณระบุความกว้างสำหรับคลาส. เซลล์ในรูปแบบ CSS เช่น. เซลล์ {width: 300px;} คุณจะได้รับผลที่คล้ายกัน แต่ข้อ จำกัด ที่คุณกล่าวถึงจะอยู่ที่นั่นเสมอเมื่อใช้ div ยกเว้นว่าคุณกำหนดความกว้างสำหรับคลาส CSS ของเซลล์ อีกวิธีหนึ่งของการได้รับผลกระทบที่เหมือนกันคือการใช้คลาสต่อไปนี้: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </style> แทนที่จะใช้คลาสที่กล่าวถึงในคำตอบข้างต้น
— นิล
@thatsIch ผมได้เพิ่ม UPDATE 1 ในคำตอบของฉันที่อธิบายถึงวิธีแก้ปัญหาสำหรับปัญหาความกว้างที่คุณกล่าวถึง
— นิล
4

หากมีสิ่งใดในการ<table>ที่คุณไม่ชอบบางทีคุณอาจจะใช้ไฟล์ตั้งค่าใหม่ ?

หรือ

หากคุณต้องการสิ่งนี้สำหรับการจัดวางของหน้าลองดูตัวอย่างรูปแบบ cssplayสำหรับการออกแบบเว็บไซต์ที่ไม่มีตาราง

— Urszula Karzelek
แหล่งที่มา
3

ฉันไม่เห็นคำตอบใด ๆ ที่พิจารณาถึง Grid-Css ฉันคิดว่ามันเป็นวิธีที่สง่างามมาก: grid-css รองรับการขยายแถวและและขยายคอลัมน์ ที่นี่คุณสามารถค้นหาบทความที่ดีมาก:

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

— Zardo
แหล่งที่มา
2

ใช้ประเภทเอกสารที่ถูกต้อง มันจะแก้ปัญหา เพิ่มบรรทัดด้านล่างไปด้านบนของไฟล์ 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

— Harijs Krūtainis
แหล่งที่มา
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
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.