Thêm đường viền dưới cùng vào hàng bảng <tr>

Tôi có một bảng 3 trên 3. Tôi cần một cách để thêm một đường viền cho dưới cùng của mỗi hàng trvà cung cấp cho nó một màu cụ thể.

Đầu tiên tôi đã thử cách trực tiếp, tức là:

<tr style="border-bottom:1pt solid black;">

Nhưng điều đó đã không làm việc. Vì vậy, tôi đã thêm CSS như thế này:

tr {
border-bottom: 1pt solid black;
}

Điều đó vẫn không hiệu quả.

Tôi thích sử dụng CSS hơn vì sau đó tôi không cần thêm stylethuộc tính cho mỗi hàng. Tôi đã không thêm một borderthuộc tính cho <table>. Tôi hy vọng điều đó không ảnh hưởng đến CSS của tôi.

Tôi đã có một vấn đề như thế này trước đây. Tôi không nghĩ trcó thể lấy kiểu dáng đường viền trực tiếp. Cách giải quyết của tôi là tạo kiểu cho tdcác hàng:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Thêm vào border-collapse:collapsequy tắc bảng của bạn:

table { 
    border-collapse: collapse; 
}

Liên kết

Sử dụng border-collapse:collapsetrên bàn và border-bottom: 1pt solid black;trên tr

Sử dụng

border-collapse:collapse như Nathan đã viết và bạn cần phải thiết lập

td { border-bottom: 1px solid #000; }

Có rất nhiều câu trả lời không đầy đủ ở đây. Vì bạn không thể áp dụng đường viền cho trthẻ, bạn cần áp dụng nó cho tdhoặc thcác thẻ như vậy:

td {
  border-bottom: 1pt solid black;
}

Làm điều này sẽ để lại một khoảng trống nhỏ giữa mỗi cái td, điều này có thể không được mong muốn nếu bạn muốn đường viền xuất hiện như thể đó là trthẻ. Để "điền vào các khoảng trống" để nói, bạn cần sử dụng thuộc border-collapsetính trên tablephần tử và đặt giá trị của nó thành collapse, như vậy:

table {
  border-collapse: collapse;
}

Sử dụng

table{border-collapse:collapse}
tr{border-top:thin solid}

Thay thế "solid solid" bằng các thuộc tính CSS.

Hiển thị hàng dưới dạng một khối.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

và để hiển thị màu thay thế đơn giản:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Bạn có thể sử dụng box-shadowtài sản để giả đường viền của một tryếu tố. Điều chỉnh vị trí Y của box-shadow(bên dưới được biểu thị là 2px) để điều chỉnh độ dày.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Tôi đã thử thêm

    table {
      border-collapse: collapse;
    }   

bên cạnh

    tr {
      bottom-border: 2pt solid #color;
    }

và sau đó nhận xét về sự sụp đổ biên giới để xem những gì đã làm việc. Chỉ cần có bộ chọn tr với thuộc tính biên giới dưới cùng làm việc cho tôi!

Không có CSS ​​CSS cũ.

Không có ảnh biên giới trực tiếp

CSS Border cũ.

Bảng có viền ảnh trực tiếp

Tôi thấy rằng khi sử dụng phương pháp này, khoảng cách giữa các phần tử td đã tạo ra một khoảng cách hình thành trong đường viền, nhưng không sợ hãi ...

Một cách xung quanh này:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

Với CSS:

td.end{
    border:2px solid black;
}

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

Bạn có thể làm tương tự cho toàn bộ hàng là tốt.

Có border-bottom-style, border-top-style, border-left-style, border-right-style. Hoặc đơn giảnborder-style là áp dụng cho tất cả bốn biên giới cùng một lúc.

Bạn có thể xem (và THỬ BẠN trực tuyến) chi tiết hơn tại đây

Một số câu trả lời thú vị. Vì bạn chỉ muốn một đáy biên (hoặc trên cùng) ở đây là hai nữa. Giả sử bạn muốn có viền màu xanh dày 3px. Trong phần kiểu bạn có thể thêm

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

Trong mã bảng

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Một giải pháp khác cho vấn đề này là border-spacingtài sản:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Không có viền CSS phía dưới:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Bạn không thể đặt đường viền trên phần tử tr. Điều này làm việc cho tôi trong firefox và IE 11:

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}