Có nghĩa là làm cho bảng kết quả trông ít hơn như sau:
[=== ROW ===] [=== ROW ===] [=== ROW ===] [=== ROW ===]
... và hơn thế nữa:
[=== ROW ===] [=== ROW ===] [=== ROW ===] [=== ROW ===]
Tôi đã thử thêm
margin-bottom:1em;đến cả td và tr nhưng không có gì. Bất kỳ ý tưởng?
Câu trả lời:
Tất cả những gì bạn cần:
table {
border-collapse: separate;
border-spacing: 0 1em;
}Giả sử bạn muốn có khoảng cách dọc 1em và không có khoảng cách ngang. Nếu bạn đang làm điều này, có lẽ bạn cũng nên xem xét việc kiểm soát chiều cao dòng của mình.
Thật kỳ lạ khi một số câu trả lời mà mọi người đưa ra liên quan đến sự sụp đổ biên giới: sự sụp đổ, tác động của nó hoàn toàn ngược lại với những gì câu hỏi đặt ra.
thead, tbody {position: relative; top: -{border-spacing-value} }.
table {
border-collapse: collapse;
}
td {
padding-top: .5em;
padding-bottom: .5em;
}Các ô sẽ không phản ứng với bất kỳ điều gì trừ khi bạn đặt thu gọn đường viền trước. Bạn cũng có thể thêm đường viền cho các phần tử TR sau khi được đặt (trong số những thứ khác.)
Nếu đây là dành cho bố cục, tôi sẽ chuyển sang sử dụng DIV và các kỹ thuật bố cục cập nhật hơn, nhưng nếu đây là dữ liệu dạng bảng, hãy loại bỏ chính bạn. Tôi vẫn sử dụng nhiều bảng trong các ứng dụng web của mình để lấy dữ liệu.
Nếu không có câu trả lời nào khác là thỏa đáng, bạn luôn có thể tạo một hàng trống và tạo kiểu bằng CSS một cách thích hợp để trở nên minh bạch.
Nếu bạn không có đường viền hoặc có đường viền và muốn có khoảng cách bên trong các ô, bạn có thể sử dụng paddinghoặc line-height. Theo như tôi biết, lề không ảnh hưởng đến ô và hàng.
Thuộc tính CSS cho khoảng cách giữa các ô làborder-spacing , nhưng nó không hoạt động trên IE6 / 7 (vì vậy bạn có thể sử dụng nó tùy thuộc vào số lượng của bạn).
Nếu vẫn thất bại, bạn có thể sử dụng cellspacingthuộc tính cũ trong đánh dấu của mình - nhưng điều này cũng sẽ cung cấp cho bạn khoảng cách giữa các cột. Một số thiết lập lại CSS đề xuất bạn vẫn nên đặt nó để được hỗ trợ trên nhiều trình duyệt:
/ * bảng vẫn cần
cellspacing="0"trong đánh dấu * /
Đây là cách (tôi đã nghĩ rằng nó không thể):
Đầu tiên, chỉ cung cấp cho bảng khoảng cách đường viền dọc (ví dụ 5px) và đặt khoảng cách đường viền ngang bằng 0. Sau đó, bạn nên đặt đường viền thích hợp cho mỗi ô hàng. Ví dụ: ô ngoài cùng bên phải trong mỗi hàng phải có đường viền ở trên, dưới và bên phải. Các ô ngoài cùng bên trái phải có đường viền ở trên, dưới và bên trái. Và các ô khác giữa 2 ô này chỉ nên có đường viền trên và dưới. Như ví dụ này:
<table style="border-spacing:0 5px; color:black">
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
</table>Đơn giản là bạn có thể sử dụng padding-topvà padding-bottomtrên một tdphần tử.
Đơn vị có thể bất cứ điều gì từ danh sách này:
td
{
padding-top: 10px;
padding-bottom: 10px;
}<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>padding trong TD hoạt động nếu bạn muốn không gian có cùng màu nền với td
trong trường hợp của tôi, yêu cầu là khoảng trắng giữa hàng tiêu đề và bất cứ thứ gì ở trên nó
bằng cách áp dụng kiểu này cho một ô duy nhất, tôi đã có thể có được sự phân tách mong muốn. Không cần thiết phải thêm nó vào tất cả các ô ... Có thể cho rằng không phải là thanh lịch NHẤT, nhưng có thể thanh lịch hơn các hàng phân cách.
<td colspan="10">
<div class="HeaderRow"
style="margin-top:10px;">
<%# Eval("VendorName")%>
</div>
</td> Nếu bạn gắn bó với thiết kế bằng cách sử dụng bảng, ý tưởng tốt nhất sẽ là cung cấp một hàng trống không có nội dung và chiều cao được chỉ định giữa mỗi hàng trong bảng.
Bạn có thể sử dụng div để tránh sự phức tạp này. Chỉ cần cho một số dư cho mỗi div.
Bạn cũng có thể chỉ cần sửa đổi chiều cao cho mỗi hàng bằng cách sử dụng CSS.
<head>
<style>
tr {
height:40px;
}
</style>
</head>
<body>
<table>
<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>
</table>
</body>Bạn cũng có thể sửa đổi chiều cao của <td>phần tử, nó sẽ cho bạn kết quả tương tự.
Tạo một cái khác <tr>ngay bên dưới và thêm một số không gian hoặc chiều cao vào nội dung của<td>
Ví dụ như kiểm tra các fiddle
Thêm quy tắc sau vào tr và nó sẽ hoạt động
float: leftMẫu (Mở nó trong IE9 offcourse :)): http://jsfiddle.net/zshmN/
CHỈNH SỬA: Đây không phải là giải pháp hợp pháp hoặc đúng như nhiều người đã chỉ ra, nhưng nếu bạn không có lựa chọn nào và cần một thứ gì đó, điều này sẽ hoạt động trong IE9.
Vì vậy, tất cả những người đang bỏ phiếu, xin vui lòng cho chúng tôi biết giải pháp chính xác.