2011-08-24 48 views
58
<html> 
    <style type="text/css"> 
     .table { display: table;} 
     .tablerow { display: table-row; border:1px solid black;} 
     .tablecell { display: table-cell; } 
    </style> 
    <div class="table"> 
     <div class="tablerow"> 
      <div class="tablecell">Hello</div> 
      <div class="tablecell">world</div> 
     </div> 
     <div class="tablerow"> 
      <div class="tablecell">foo</div> 
      <div class="tablecell">bar</div> 
     </div> 
    </div> 
</html> 

Theo tôi hiểu, một đường viền màu đen sẽ được vẽ trên mỗi hàng mà tôi đã chỉ định qua lớp tablerow.Nhưng đường viền không xuất hiện.hiển thị css: bảng không hiển thị đường viền

Và tôi muốn thay đổi chiều cao của một row.If tôi xác định nó với 'px' - đó work.But, nếu tôi cho nó với một% - sẽ không work.I thử như sau

.tablerow { 
    display: table-row; 
    border:1px solid black; 
    position: relative; //not affecting anything and the border disappears!! 
    //position: absolute; // if this is set,the rows overlaps and the border works 
    height: 40%; // works only if specified in px and not in % 
} 

Đã xảy ra sự cố ở đâu đó nhưng tôi không thể hiểu được ở đâu. Hãy giúp tôi!

+0

Bạn đã thử xác định biên giới cho các yếu tố tế bào? hoặc là nó không phải là những gì bạn muốn? –

Trả lời

119

Bạn cần phải thêm border-collapse: collapse; đến lớp .table cho nó hoạt động như thế này:

<html> 
<style type="text/css"> 
    .table { display: table; border-collapse: collapse;} 
    .tablerow { display: table-row; border: 1px solid #000;} 
    .tablecell { display: table-cell; } 
</style> 
<div class="table"> 
    <div class="tablerow"> 
     <div class="tablecell">Hello</div> 
     <div class="tablecell">world</div> 
    </div> 
    <div class="tablerow"> 
     <div class="tablecell">foo</div> 
     <div class="tablecell">bar</div> 
    </div> 
</div> 
</html> 
+0

Cảm ơn, điều đó đã giúp ích. –

+0

Cảm ơn giải pháp tốt –

+0

Cảm ơn bạn! Giải pháp của bạn đã giúp! – yathrakaaran

2

Bạn cần thêm border vào lớp tablecell.

Ngoài ra, để làm cho nó trông đẹp, bạn sẽ cần phải thêm border-collapse:collapse; vào lớp bảng.

Ví dụ: http://jsfiddle.net/jasongennaro/4bvc2/

EDIT

Theo nhận xét

tôi đang áp dụng một biên giới để một div, nó nên được hiển thị đúng không?

Vâng, nhưng một khi bạn cài đặt nó để hiển thị như một table đó là cách nó sẽ hoạt động ... như một table, vì vậy sau đó bạn sẽ cần phải làm theo các quy tắc css để hiển thị bảng.

Nếu bạn cần phải thiết lập các border chỉ trên các hàng, sử dụng border-topborder-bottom và sau đó thiết lập các lớp học cụ thể đối với các tế bào tận cùng bên trái và ngoài cùng bên phải.

+0

tại sao tôi không thể cung cấp cho biên giới cho một hàng ?? –

+0

Tôi đang áp dụng đường viền cho div, nó sẽ được hiển thị đúng không? –

+1

Xem chỉnh sửa của tôi ở trên @Vivek Chandra –

2

Các hàng trong bảng không thể có thuộc tính đường viền. Bạn có thể lấy một đường viền xung quanh mỗi hàng bằng cách cho tất cả các ô một đường viền trên cùng và dưới cùng, và thêm một lớp cho các ô trái-phải và trái nhất tương ứng với đường viền trái và phải tương ứng.

JS fiddle link

chỉnh sửa: Tôi quên về border-collapse:collapse. Điều đó cũng sẽ hoạt động.

Các vấn đề liên quan