CSS - Chỉ viền bên trong bảng - Thư viện tuyệt vời

161

Tôi đang cố gắng tìm hiểu cách thêm đường viền chỉ bên trong bảng. Khi tôi làm:CSS - Chỉ viền bên trong bảng

table { 
    border: 0; 
} 
table td, table th { 
    border: 1px solid black; 
}

Đường viền quanh toàn bộ bảng và giữa các ô bảng. Những gì tôi muốn đạt được là chỉ có biên giới bên trong bảng xung quanh các ô bảng (không có viền ngoài xung quanh bảng).

Dưới đây là đánh dấu Tôi đang sử dụng cho các bảng (mặc dù tôi nghĩ rằng đó không phải là quan trọng):

<table> 
    <tr> 
     <th>Heading 1</th> 
     <th>Heading 2</th> 
    </tr> 
    <tr> 
     <td>Cell (1,1)</td> 
     <td>Cell (1,2)</td> 
    </tr> 
    <tr> 
     <td>Cell (2,1)</td> 
     <td>Cell (2,2)</td> 
    </tr> 
    <tr> 
     <td>Cell (3,1)</td> 
     <td>Cell (3,2)</td> 
    </tr> 
</table>

Và đây là một số phong cách cơ bản tôi áp dụng cho hầu hết các bảng của tôi:

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

Nguồn

2009-08-10 Richard Knop

Tôi chỉ thấy các đường viền quanh các ô. Vì mỗi ô có đường viền, có vẻ như bảng có đường viền. Có lẽ tôi không nhận được câu hỏi? –

Còn được gọi là ** đường viền bên trong **. –

171

Nếu bạn đang làm những gì tôi tin rằng bạn đang cố gắng để làm, bạn sẽ cần một cái gì đó nhiều hơn một chút như thế này:

table { 
    border-collapse: collapse; 
} 
table td, table th { 
    border: 1px solid black; 
} 
table tr:first-child th { 
    border-top: 0; 
} 
table tr:last-child td { 
    border-bottom: 0; 
} 
table tr td:first-child, 
table tr th:first-child { 
    border-left: 0; 
} 
table tr td:last-child, 
table tr th:last-child { 
    border-right: 0; 
}

jsFiddle Demo

Vấn đề là bạn đang thiết lập một 'biên giới đầy đủ' xung quanh tất cả các ô, làm cho nó xuất hiện như thể bạn có một đường viền xung quanh toàn bộ bảng.

Chúc mừng.

CHỈNH SỬA: Bạn có thể tìm thấy thêm một chút thông tin về các lớp giả này trên quirksmode và như mong đợi, bạn có khá nhiều S.O.L. về hỗ trợ của IE.

Nguồn

2009-08-10 22:05:49 theIV

không thành công cho bảng lồng nhau, bạn có thể cần "tr> td" thay vì "tr td" vv ... – user2451227

Với các bảng đơn giản như thế này, có một giải pháp ngắn hơn nhiều, tránh sử dụng các lớp giả bằng cách sử dụng bộ kết hợp anh chị em tiếp theo. Xem câu trả lời của tôi. – dalgard

@theIV, với điều này được trả lời cách đây 5 năm, có cách nào mới '/' hiệu quả hơn 'không? – jbutler483

này nên làm việc:

table { 
border:0; 
} 

table td, table th { 
    border: 1px solid black; 
    border-collapse: collapse; 
}

chỉnh sửa:

tôi vừa thử nó, không có viền bảng. nhưng nếu tôi thiết lập một biên giới bảng nó được loại bỏ bởi sự sụp đổ biên giới.

đây là testfile:

<html> 
<head> 
<style type="text/css"> 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 


table { 
    border: 0; 
} 
table td, table th { 
    border: 1px solid black; 
} 


</style> 
</head> 
<body> 
<table> 
    <tr> 
     <th>Heading 1</th> 
     <th>Heading 2</th> 
    </tr> 
    <tr> 
     <td>Cell (1,1)</td> 
     <td>Cell (1,2)</td> 
    </tr> 
    <tr> 
     <td>Cell (2,1)</td> 
     <td>Cell (2,2)</td> 
    </tr> 
    <tr> 
     <td>Cell (3,1)</td> 
     <td>Cell (3,2)</td> 
    </tr> 
</table> 

</body> 
</html>

Nguồn

2009-08-10 21:56:40 Rufinus

Không có điều đó không làm việc tôi đã cố gắng đó. Tôi sẽ chỉnh sửa bài đăng đầu tiên của mình. –

166

này làm việc cho tôi:

table { 
    border-collapse: collapse; 
    border-style: hidden; 
} 

table td, table th { 
    border: 1px solid black; 
}

view example ...

thử nghiệm trong FF 3.6 và Chromium 5.0, IE thiếu hỗ trợ; từ W3C:

Đường viền có 'đường viền' của 'ẩn' được ưu tiên hơn tất cả các đường biên xung đột khác. Bất kỳ đường viền nào có giá trị này sẽ chặn tất cả đường viền tại vị trí này.

Nguồn

2010-07-28 01:02:34 anthonyrisinger

Giải pháp rất phù hợp. Tôi đã thử nghiệm điều này và nó hoạt động hoàn hảo với HTML 4.1 STRICT (noquircks) trong FF3.6, Opera11, IE8, Chrome10.0 – Jesse

Miễn là bạn không cần một biên giới bảng, điều này chắc chắn là giải pháp thanh lịch nhất. – cjroth

Ý kiến của tôi là các câu trả lời HTML & CSS phải bao gồm bản trình diễn. Ở đây bạn đi: [jsFiddle Demo] (http://jsfiddle.net/Daniel_Hug/ydCH9) –

Do mantain khả năng tương thích với IE7, IE8 tôi đề nghị sử dụng first-child và không cuối cùng con để làm điều này:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;} 

table tr td:first-child{border-left:0;} 

table tr:first-child td{border-top:0;}

Bạn có thể tìm hiểu về CSS 2.1 Giả lớp tại địa chỉ: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Nguồn

2010-10-05 15:50:21 Crisboot

Đây là một giải pháp tuyệt vời. Nhưng hãy cẩn thận, nếu bạn có một bảng khác trong một trong các ô bảng của bạn và muốn xem các đường viền bên trong, bạn cần một tập hợp các dòng CSS khác cho bảng "bên trong" của bạn –

Ví dụ về đơn giản cách rất để bạn có thể đạt được hiệu quả mong muốn:

<table border="1" frame="void" rules="all"> <tr> <td>1111</td> <td>2222</td> <td>3333</td> </tr> <tr> <td>4444</td> <td>5555</td> <td>6666</td> </tr> </table>

Nguồn

2011-12-07 10:02:22 jony

o_O Tôi không biết loại COMBO nào là: ' frame = "void" rules = "all" ', nhưng nó hoạt động và tôi thích nó. +1 –

Tôi ước tôi có thể đánh dấu một bình luận. Đây là thiên tài. –

Nó hoạt động? Đây là yêu thuật gì? –

rằng sẽ làm tất cả mà không cần css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

mã từ : HTML CODE TUTORIAL

Nguồn

2012-11-08 20:29:39 TwoFaceZ

Câu trả lời đó đã được đưa ra. –

Để đánh dấu bảng thông thường, đây là giải pháp ngắn hoạt động trên tất cả các thiết bị/trình duyệt trên BrowserStack, ngoại trừ IE 7 và dưới đây:

table { border-collapse: collapse; } 

td + td, 
th + th { border-left: 1px solid; } 
tr + tr { border-top: 1px solid; }

Để được hỗ trợ trình duyệt IE 7, thêm này:

tr + tr > td, 
tr + tr > th { border-top: 1px solid; }

Một trường hợp thử nghiệm có thể được nhìn thấy ở đây: http://codepen.io/dalgard/pen/wmcdE

Nguồn

2014-08-31 12:14:08 dalgard

Tuyệt vời - vì điều này cũng cho phép một thiết lập một đường viền khác với bảng, đường tròn hơn là không hiển thị nó. – jsbueno

Không hoạt động nếu bạn sử dụng rowspan. – Jack

Thêm biên giới để mỗi tế bào với điều này:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Xóa đường viền trên cùng khỏi tất cả các ô trong hàng đầu tiên:

table > tbody > tr:first-child > td { border-top: 0; }

Tháo viền trái từ các tế bào trong cột đầu tiên:

table > tbody > tr > td:first-child { border-left: 0; }

Tháo biên giới ngay từ các tế bào trong cột cuối cùng:

table > tbody > tr > td:last-child { border-right: 0; }

Tháo biên giới phía dưới từ các ô ở hàng cuối cùng:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

Nguồn

2015-01-05 21:15:09 Brian

CSS - Chỉ viền bên trong bảng

Trả lời

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