Tạo đường viền cho một hàng trong bảng HTML, <tr>

Có thể tạo đường viền cho một hàng của bảng <tr>trong một lần thay vì tạo đường viền cho các ô riêng lẻ, <td>chẳng hạn như,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Điều này tạo ra một đường viền xung quanh ô đã cho <tr>nhưng nó yêu cầu một đường viền xung quanh các ô riêng lẻ.

Chúng ta có thể đưa ra một đường viền <tr>chỉ trong một lần?

→ jsFiddle

Bạn có thể đặt borderthuộc tính trên một trphần tử, nhưng theo đặc tả CSS 2.1, các thuộc tính đó không có tác dụng trong mô hình đường viền được phân tách, mô hình này có xu hướng là mặc định trong các trình duyệt. Tham khảo: 17.6.1 Mô hình đường viền được phân tách . ( Giá trị ban đầu của border-collapselà separatetheo CSS 2.1 và một số trình duyệt cũng đặt nó làm giá trị mặc định cho table. Dù sao thì ảnh hưởng thực sự là bạn nhận được đường viền riêng biệt trên hầu hết các trình duyệt trừ khi bạn chỉ định rõ ràng collapse.)

Do đó, bạn cần sử dụng đường viền thu gọn. Thí dụ:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

Chắc chắn rồi! Chỉ dùng

<tr style="outline: thin solid">

trên hàng nào bạn thích. Đây là một trò đùa .

Tất nhiên, như mọi người đã đề cập, bạn có thể thực hiện việc này thông qua id, hoặc lớp, hoặc một số phương tiện khác nếu bạn muốn.

Đúng. Tôi đã cập nhật câu trả lời của mình DEMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

Nếu bạn chỉ muốn tạo kiểu, <tr>bạn có thể thực hiện với một lớp: DEMO thứ hai

Sử dụng các lớp CSS:

tr.border{
    outline: thin solid;
}

và sử dụng nó như:

<tr class="border">...</tr>

Bạn có thể sử dụng thuộc tính box-shadow trên phần tử tr để thay thế cho đường viền. Ngoài ra, bất kỳ thuộc tính bán kính đường viền nào trên cùng một phần tử cũng sẽ áp dụng cho bóng hộp.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Ô bên trái:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

(các) ô giữa:

style="border-style:solid;border-width: 1px 0px 1px 0px;"

ô bên phải:

style="border-style:solid;border-width: 1px 1px 1px 0px;"

thêm border-spacing: 0rem 0.5rem; tạo khoảng trống cho mỗi ô (td, th) mục ở dưới cùng của nó trong khi không để lại khoảng trống giữa các ô

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

Sau khi đấu tranh với điều này trong một thời gian dài, tôi đã kết luận rằng câu trả lời đơn giản một cách ngoạn mục là chỉ cần điền vào bảng với các ô trống để điền vào mỗi hàng của bảng với cùng một số ô (hiển nhiên là có tính đến colspan). Với HTML do máy tính tạo ra, điều này rất đơn giản để sắp xếp và tránh đấu tranh với các giải pháp phức tạp. Hình minh họa sau:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>