Cách tạo bảng chỉ bằng thẻ <div> và Css

182

Tôi muốn tạo bảng chỉ bằng cách sử dụng <div>thẻ và CSS.

Đây là bảng mẫu của tôi.

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

Và Phong cách:

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

Nhưng bảng này không hoạt động với IE7 và phiên bản bên dưới. Vui lòng đưa ra giải pháp và ý tưởng của bạn cho tôi. Cảm ơn.

html  css 
— Kumara
nguồn
hãy xem bài viết này
— tanathos
32
Tại sao bạn muốn sử dụng divđể tạo bảng?
— huy
3
xem bài viết hay 'Bảng CSS có tốt hơn Bảng HTML không?' [ vanseodesign.com/css/tables/]
— vladimir
5
Tôi nghĩ lý do bất kỳ ai muốn sử dụng bảng dựa trên div thay vì bảng bình thường là .... kết xuất / hoạt hình / phản chiếu trên bảng dựa trên div thực sự nhanh hơn (đặc biệt đối với kích thước DOM lớn) so với hiển thị bảng bình thường. ..... xem cái này .... stubbornella.org/content/2009/03/27/ trên này .... developer.nokia.com/community/wiki/ triệt ở trên rằng tất cả các plugin javascript chuyên sâu về dữ liệu như slickgrid v.v ... sử dụng divBasingtable
— bhavya_w
1
@huy Có lẽ vì divs có khả năng linh hoạt hơn bảng!
— Kai Noack

Câu trả lời:

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

Đoạn trích có thể chạy được:

Hiển thị đoạn mã

— Shiva Komuravelly
nguồn
223
Cảm ơn bạn! Một người thực sự trả lời câu hỏi của anh ấy và không chỉ nói rằng "đó là một ý tưởng ngu ngốc." Tôi ghét nó khi mọi người không trả lời các câu hỏi ... Nếu anh ta hỏi nó, nó sẽ được trả lời
— Brian Leishman
23
@stumpx: Đôi khi câu trả lời đúng là "đừng làm vậy". Đây là một trong những thời điểm. Khi bạn phải hỏi "làm thế nào để tôi tạo bảng bằng div và CSS", bạn có một trong hai vấn đề: hoặc bạn đang hỏi sai câu hỏi hoặc bạn đang cố làm sai.
— cHao
28
@cHao Nếu bạn nghĩ đó là câu trả lời thì hãy bỏ qua và để ai đó thực sự muốn trả lời câu hỏi trả lời.
— Brian Leishman
14
@stumpx: Nếu tôi nghĩ câu hỏi không nên được trả lời , tôi sẽ bỏ phiếu để đóng - vì câu hỏi thậm chí không tồn tại. Tất cả các câu hỏi hợp lệ xứng đáng có một câu trả lời. Nhưng như tôi đã nói, đôi khi câu trả lời đúng nhất là "đừng làm điều đó". Có tốt để tư vấn cho ai đó trong cách giải quyết vấn đề sai? Có tốt để đứng yên trong khi những người khác cung cấp lời khuyên như vậy? Tôi nói là không.
— cHao
5
Nếu bạn không biết nhà thiết kế của bạn có gì trong đầu, khi để dữ liệu theo cấu trúc div như ở trên sẽ tốt hơn nhiều khi để chúng trong bảng. Tốt hơn có nghĩa là dễ dàng chuyển đổi từ div nổi sang bảng ngược lại.
— anatoly techtonik
96

divs không nên được sử dụng cho dữ liệu bảng. Điều đó cũng sai như sử dụng bảng để bố trí.
Sử dụng a <table>. Thật dễ dàng, đúng ngữ nghĩa và bạn sẽ hoàn thành trong 5 phút.

— Kobi
nguồn
8
có thể phụ thuộc vào ứng dụng mặc dù. đôi khi những gì xuất hiện dạng bảng có thể là tuyến tính, mặc dù phân chia. Ví dụ, lịch có thể có các lợi ích của chúng dưới dạng div thay vì bảng
— Dan
2
@Dann: Họ có thể có lợi ích như một danh sách , nhưng một loạt các div về mặt ngữ nghĩa cũng tệ như một bảng bố cục.
— cHao
4
có một số lý do mà chúng tôi đang yêu cầu hủy bảng với DIV. Một trong số đó đang sử dụng thẻ bảng trong SharePoint 2007 làm rối tung mọi nội dung có trong trang
— Shiva Komuravelly
2
@simplyletgo: Về mặt ngữ nghĩa, sẽ phù hợp hơn khi định kiểu các ô của bảng thành các khối hơn là cố gắng làm cho các div hoạt động giống như một bảng.
— cHao
1
tại sao không? nếu bạn sử dụng các bảng, bạn không thể thêm một thanh cuộn xung quanh các ô nhất định để bảng của bạn có một tiêu đề bị khóa giống như excel chẳng hạn. Bảng có rất nhiều hạn chế, tại sao điều này không thể được thực hiện với div?
— pilavdzice
9

Đây là một chủ đề cũ, nhưng tôi nghĩ tôi nên đăng giải pháp của tôi. Tôi đã đối mặt với cùng một vấn đề gần đây và cách tôi giải quyết nó là bằng cách làm theo cách tiếp cận ba bước như được nêu dưới đây rất đơn giản mà không cần bất kỳ CSS phức tạp nào .

(LƯU Ý: Tất nhiên, đối với các trình duyệt hiện đại, sử dụng các giá trị của bảng hoặc hàng bảng hoặc ô bảng để hiển thị thuộc tính CSS sẽ giải quyết vấn đề. Nhưng cách tiếp cận tôi sử dụng sẽ hoạt động tốt như nhau trong các trình duyệt hiện đại và cũ hơn vì nó không sử dụng các giá trị này để hiển thị thuộc tính CSS.)

TIẾP CẬN 3 BƯỚC

Đối với bảng chỉ có div để bạn có được các ô và hàng giống như trong phần tử bảng, hãy sử dụng cách tiếp cận sau.

  1. Thay thế phần tử bảng bằng div khối (sử dụng một .tablelớp)
  2. Thay thế từng phần tử tr hoặc th bằng một khối div (sử dụng một .rowlớp)
  3. Thay thế từng phần tử td bằng div khối nội tuyến (sử dụng một .celllớp)

.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>
Mở rộng đoạn trích

CẬP NHẬT 1

Để giải quyết ảnh hưởng của cùng một chiều rộng không được duy trì trên tất cả các ô của một cột như được đề cập thatslchtrong một nhận xét, người ta có thể áp dụng một trong hai cách tiếp cận dưới đây.

  • Chỉ định chiều rộng cho celllớp

    ô {display: inline-block; chiều rộng: 340px;}

  • Sử dụng CSS của các trình duyệt hiện đại như dưới đây.

    .table {hiển thị: bảng; } .row {display: table-row;} .cell {display: table-cell;}

— Mặt trời
nguồn
1
Điều này sẽ không làm điều đó vì các cột không cùng kích thước.
— đó là
Bạn đúng về chiều rộng không hành xử giống như trong phần tử bảng. Tuy nhiên, nếu bạn chỉ định chiều rộng cho lớp .cell trong CSS như .cell {width: 300px;} thì bạn có thể đạt được hiệu ứng tương tự. Nhưng, giới hạn mà bạn đã đề cập sẽ luôn tồn tại khi sử dụng div trừ khi bạn xác định chiều rộng cho lớp CSS của ô. Cách khác để có được hiệu ứng tương tự sẽ là sử dụng các lớp sau: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </ style> thay vì sử dụng các lớp được đề cập trong câu trả lời ở trên.
— Sunil
@thatsIch, tôi đã thêm CẬP NHẬT 1 trong câu trả lời của mình để giải thích cách giải quyết cho vấn đề chiều rộng mà bạn đã đề cập
— Sunil
2

Sử dụng đúng loại tài liệu; nó sẽ giải quyết vấn đề Thêm dòng dưới đây vào đầu tệp HTML của bạn:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— A B C D
nguồn
2

Một chút CHÍNH THỨC, nhưng có thể giúp ai đó cho HTML sạch hơn ... 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>

Hoạt động trên Chrome và Firefox

— Harijs Krūtainis
nguồn
2
Và nếu các tế bào bảng của bạn có <div>các yếu tố trong đó? Bạn có thể muốn.common_table div > div
— vol7ron 19/03/2016
2

Khi xây dựng một bộ thẻ bố cục tùy chỉnh, tôi đã tìm thấy một câu trả lời khác cho vấn đề này. Được cung cấp ở đây là bộ thẻ tùy chỉnh và các lớp CSS của chúng.

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 }

Chìa khóa để có được các ô trống và các ô nói chung có kích thước phù hợp, là Kích thước hộp và Đệm. Border cũng sẽ làm điều tương tự, nhưng tạo ra một dòng trong hàng. Đệm không. Và, trong khi tôi chưa thử nó, tôi nghĩ rằng Margin sẽ hoạt động giống như Padding, trong việc buộc và ô trống được hiển thị đúng.

— Cổng vòm điện tử
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.