Làm thế nào tôi có thể áp dụng một đường viền chỉ trong một bảng?

195

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

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

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

Đây là đánh dấu tôi đang sử dụng cho các bảng (mặc dù tôi nghĩ rằng điều đó không 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ố kiểu cơ bản tôi áp dụng cho hầu hết các bảng của mình:

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

— Richard Knop
nguồn

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

— Chetan S

3

Cũng được gọi là biên giới nội bộ .

— Ốc cơ khí

203

Nếu bạn đang làm những gì tôi tin rằng bạn đang cố gắng thực hiện, bạn sẽ cần một cái gì đó giống 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;
}

Trình diễn jsFiddle

Vấn đề là bạn đang thiết lập một 'đường viền đầ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.

EDIT: Có thể tìm thấy thêm một chút thông tin về các lớp giả đó trên quirksmode , và, như mong đợi, bạn có khá nhiều SOL về mặt hỗ trợ IE.

— theIV
nguồn

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.

— dopedard

1

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

— jbutler483

Không hoạt động nếu bạn từng sử dụng hàng trên cột đầu tiên trong bảng.

— Jack

191

cái này hiệu quả với tôi

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

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

xem ví dụ ...

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

Biên giới với 'kiểu' đường viền 'của' ẩn 'được ưu tiên hơn tất cả các đường viền xung đột khác. Bất kỳ đường viền nào có giá trị này đều triệt tiêu tất cả các đường viền tại vị trí này.

— anthonyrisinger
nguồn

1

Miễn là bạn không cần viền bàn, đây chắc chắn là giải pháp thanh lịch nhất.

— cjroth

42

Ví dụ về một cách rất đơn giản để bạn đạ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>

— jony
nguồn

13

"MAGIC" GIẢI THÍCH: frame và ruleslà các table thuộc tính OLD (không phải HTML5) (bạn nên sử dụng CSS thay thế). framecho biết phần nào của viền ngoài bảng sẽ hiển thị - voidcó nghĩa là ẩn tất cả các viền bên ngoài ... rulescho biết phần nào của viền trong bảng sẽ hiển thị - allcó nghĩa là tất cả chúng ... rõ ràng ... Vui lòng không sử dụng phần này, trừ khi bạn là những người cuồng HTML3 ... :)

— jave.web

1

Thêm một cái gì đó như viền: 1px màu đen sẽ đảm bảo giới hạn bên ngoài của bảng có đường viền.

— Aaron Liu

1

Làm việc như một cơ duyên vào năm 2020 để nhanh chóng thêm một số khả năng đọc vào một bảng cách nhau lố bịch trong một trang web tôi đang đọc. Trên thực tế, chỉ điều này là đủ cho biên giới nội bộ: quy tắc = "tất cả"

— Edoardo Facchinelli

11

Do khả năng tương thích của mantain với eg7, tức là 8 tôi khuyên bạn nên sử dụng con đầu tiên và không phải con cuối cùng để 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ề các lớp giả CSS CSS tại: http://msdn.microsoft.com/en-us/l Library / cc351024 (VS85) .aspx

— Khủng hoảng
nguồn

Đâ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 ô của bảng và muốn xem các đường viền bên trong, bạn cần một bộ dòng CSS khác cho bảng "bên trong" của mình

— Michael Biermann

10

Đối với đánh dấu bảng thông thường, đây là một 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 trở xuống:

table { border-collapse: collapse; }

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

Để được hỗ trợ IE 7, hãy thêm điều 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

— dunkard
nguồn

Tuyệt vời - vì điều này cũng cho phép một người đặt một đường viền khác cho bảng, không chỉ hiển thị nó.

— jsbueno 9/2/2015

5

cái này nên hoạt động:

table {
 border:0;
}

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

biên tập:

Tôi chỉ thử nó, không có biên giới bảng. nhưng nếu tôi đặt đường viền bảng thì nó sẽ bị loại bỏ bởi sự sụp đổ đường viền.

đây là bản thử nghiệm:

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

— Rufinus
nguồn

Không, nó không hoạt động tôi đã thử nó. Tôi sẽ chỉnh sửa bài viết đầu tiên của tôi.

— Richard Knop

3

Điều đó sẽ làm tất cả mà không cần css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

mã từ: HTML MÃ HƯỚNG DẪN

— TwoFaceZ
nguồn

0

Thêm đường viền cho mỗi ô bằng cái này:

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

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

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

Xóa đường viền bên trái khỏi các ô trong cột đầu tiên:

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

Xóa đường viền bên phải khỏi các ô trong cột cuối cùng:

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

Xóa đường viền dưới cùng khỏi các ô ở hàng cuối cùng:

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

http://jsfiddle.net/hzru0ytx/

— Brian
nguồn

0

Hoạt động cho mọi sự kết hợp của tbody / thead / t feet và td / th

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

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

Mở rộng đoạn trích

— người dùng1119279
nguồn