Cách chỉ định đường viền dưới cùng của <tr>?

36

Hãy thử như sau thay vì:

<html> 
<head> 
    <title>Table row styling</title> 
    <style type="text/css"> 
    .bb td, .bb th { 
    border-bottom: 1px solid black !important; 
    } 
    </style> 
</head> 
<body> 
    <table> 
    <tr class="bb"> 
     <td>This</td> 
     <td>should</td> 
     <td>work</td> 
    </tr> 
    </table> 
</body> 
</html>

Nguồn

2009-09-06 03:53:27

+0

Cảm ơn bạn đã trả lời.Nhưng nó không hoạt động. – omg

+0

Tôi đã sửa: thử viền dưới: 1px màu đen; thay thế. –

+0

Vẫn không hoạt động. – omg

6

Bạn nên xác định kiểu trên các yếu tố td như vậy:

<html> 
<head> 
    <style type="text/css"> 
     .bb 
     { 
      border-bottom: solid 1px black; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td> 
       Test 1 
      </td> 
     </tr> 
     <tr> 
      <td class="bb"> 
       Test 2 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

Nguồn

2009-09-06 04:03:08

+0

tại sao không thể sửa đổi tr trực tiếp? – omg

+1

như ** lừa dối ** cho biết: "Bạn không thể tạo kiểu vì nó chỉ là" phần tử nhóm hợp lý ", nhưng nó không thực sự được hiển thị. Bạn chỉ có thể tạo kiểu cho các thành phần hoặc bên trong . có một số." –

+3

Đây là một cách tiếp cận tốt. Điều duy nhất tôi sẽ cảnh báo là kích thước của html render sẽ tăng theo tỷ lệ với số lượng các phần tử TD trong bảng đến lớp. Nếu kích thước là một mối quan tâm, chúng tôi sẽ có hiệu quả hơn bằng cách nhắm mục tiêu yếu tố bảng chính nó là một bảng # idForTable tr td {border-bottom: 1px solid black}. Một mệnh đề cho toàn bộ các hàng. –

22

Thêm border-collapse:collapse vào bảng.

Ví dụ:

table.myTable{ 
    border-collapse:collapse; 
} 

table.myTable tr{ 
    border:1px solid red; 
}

này đã làm việc cho tôi.

Nguồn

2014-01-12 09:29:09

+4

Đây phải là câu trả lời được chấp nhận. Đặt đường viền trên các ô của bảng làm cho nó bị vỡ. –

+0

Như đã nêu trước đây thực sự phải là câu trả lời được chấp nhận. Việc thêm các thành phần vào bảng của bạn sẽ không làm những gì bạn nghĩ. Đó là để nói nếu bạn không muốn thêm nhiều html vào trang của bạn và làm lại bảng của bạn ... đây là giải pháp đơn giản nhất mà tôi đã nhìn thấy cho đến nay. – greaterKing

1

tr td 
{ 
    border-bottom: 2px solid silver; 
}

hoặc nếu bạn muốn biên giới bên trong thẻ TR, bạn có thể làm điều này:

tr td { 
    box-shadow: inset 0px -2px 0px silver; 
}

Nguồn

2014-01-23 22:16:14

1

Những gì tôi muốn nói ở đây là như một số loại add-on về câu trả lời @Suciu Lucian của.

Tình huống kỳ lạ mà tôi gặp phải là khi tôi áp dụng giải pháp @Suciu Lucian trong tệp của tôi, nó hoạt động trong Chrome nhưng không có trong Safari (và không thử trong Firefox). Sau khi tôi đã nghiên cứu được công bố bởi guide of styling table border w3.org, tôi thấy một cái gì đó thay thế:

table.myTable{ 
    border-spacing: 0; 
} 

table.myTable td{ 
    border-bottom:1px solid red; 
}

Có bạn phải tạo kiểu cho td thay vì tr.

Nguồn

2016-04-28 07:08:46 Halt

Cách chỉ định đường viền dưới cùng của <tr>?

Trả lời

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