Tôi có một bảng có đường viền được đặt thành "không" trong CSS. Tuy nhiên, tôi muốn đặt một đường ngang tách từng hàng trên bàn. Tôi đã thử đặt các thẻ <hr> ở giữa mỗi thẻ <td> </td> cho một hàng cụ thể nhưng nó in một đường màu đen nằm ngang với các khoảng trắng nhỏ giữa mỗi cột.Sử dụng thẻ <hr> có bảng?
Có cách nào để in đường ngang trong bảng bằng phương pháp khác không?
Id đề nghị đặt:
<tr style="border-bottom: 1px solid #000;">
trên mỗi hàng bạn muốn dòng để được vào. Bạn cũng có thể làm điều này riêng cho từng ô.
Cập nhật Id
khuyên bạn sử dụng một lớp css và có một kiểu riêng biệt nếu bạn có thể. Ví dụ:
<tr class="bordered"></tr>
tr.bordered {
border-bottom: 1px solid #000;
}
Bạn không thể đặt bất kỳ thứ gì không phải là hàng trong bảng bên trong nội dung của bảng.
Bạn nên, thay vào đó, hãy cung cấp một lớp cho các hàng cần gạch chân để bạn có thể tạo kiểu cho chúng có đường viền dưới cùng trong biểu định kiểu của bạn.
Bạn muốn đặt đường viền trên phần tử tr. Hr là một quy tắc Horizonal, không phải là một biên giới và không nên được sử dụng như một.
tr {
border-bottom: 1px solid #000;
}
<table cellpadding="0" cellspacing="0" width="200">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
noshade="noshade" thuộc tính giúp bạn loại bỏ các shadow và một số ý tưởng hơn có thể được tìm thấy từ this link, ý tôi là dòng HR CSS dựa.
Và Bảng dựa theo phong cách như
.bottomborder {
border-bottom: 1px solid #CECECE;
}
<td class=border-bottom>
Tiếp theo không hoạt động
<tr class=border-bottom>
Nó sẽ không phải là
Bạn có thể định nghĩa một lớp CSS cho chiến dịch 'tách' <tr>:
<style>
tr.separated td {
/* set border style for separated rows */
border-bottom: 1px solid black;
}
table {
/* make the border continuous (without gaps between columns) */
border-collapse: collapse;
}
</style>
Sau đó chỉ cần đánh dấu các hàng bắt buộc:
<tr>
<td>
<td>
</tr>
<tr class="separated">
<td>
<td>
</tr>
<tr>
<td>
<td>
</tr>
Xem ví dụ https://jsfiddle.net/64nydcfu/1/
TR không thể có kiểu đường viền. –
@WillLanni, cảm ơn, tôi đã sửa câu trả lời của mình. – DRCB
Một điều khác, làm cho câu trả lời này gần như chính xác như một trong những người khác, là biên giới có thể gió lên nhìn bị hỏng trừ khi bảng có một sự sụp đổ biên giới: phong cách sụp đổ trên đó. Tôi upvoted câu trả lời đã có điều này đã có trong nó, nhưng cảm ơn cho việc điều chỉnh. Tôi đã loại bỏ các downvote. –
Cách tốt nhất để thêm một đường ngang giữa các hàng là với một biên giới CSS. Đầu tiên, bạn muốn thu gọn tất cả các đường viền của bảng để không có khoảng cách giữa các ô (điều này có thể giúp giải pháp của bạn, nhưng tôi không khuyên bạn nên sử dụng giờ cho mục đích này). Tiếp theo, chỉ định đường viền ở phía dưới cùng của mỗi ô (td). Bạn có thể tương tự đặt đường viền sang trái, phải, lên, vv Xem HTML khép kín bên dưới.
<html>
<head>
<style type='text/css'>
table.test { border-collapse: collapse; }
table.test td { border-bottom: 1px solid black; }
</style>
</head>
<body>
<table class='test'>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</body>
</html>
Để có thêm tùy chọn đường viền, hãy kiểm tra this w3Schools page.
Điều này phải được đánh dấu là câu trả lời đúng, vì câu trả lời được chấp nhận thực sự không thể thực hiện được trong hầu hết các trình duyệt hiện đại. Không chắc chắn nếu nó đã trở lại trong '11, nhưng nó không phải là nữa. –
Tôi biết chủ đề này đã không được xúc động trong một thời gian nhưng tôi đã xem qua giải pháp này có thể? Ví dụ, nếu sử dụng bảng 2 cột, hãy sử dụng <td colspan="2"></td>. Nó sẽ kéo dài hai ô trên hai cột, tiết kiệm sự cần thiết cho bất kỳ CSS bổ sung nào.
<tr>
<td>data<td>
<td>data2</td>
</tr>
<td colspan="2"></td>
Làm ơn đây là bài đăng đầu tiên của tôi! :)
Giải pháp bạn cung cấp chỉ tạo một ô trải rộng trên hai cột. Câu hỏi của OP là yêu cầu ** _ một cách để tạo một đường ngang để phân tách mỗi hàng trong một bảng _ **. – Pineda
Nếu bạn đặt ô nhiều cột đó bên trong một thẻ
Tôi sẽ không đi theo kiểu nội tuyến nhưng thay vào đó hãy sử dụng lớp học. – SpaceBeers
Cá nhân tôi sẽ sử dụng một lớp học. Nhưng một trong hai cách làm việc + phong cách nội tuyến là dễ dàng hơn nhiều để tìm hiểu cho một người nào đó bắt đầu phát triển email – Undefined
Tôi không nghĩ rằng tr có thể lấy một phong cách biên giới trực tiếp. Xem ở đây: http://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr – Beachhouse