Trong tài liệu HTML của mình, tôi có một bảng có hai cột và nhiều hàng. Làm cách nào để tăng khoảng cách giữa cột đầu tiên và cột thứ hai bằng css? Tôi đã thử áp dụng "margin-right: 10px;" đến từng ô ở phía bên trái, nhưng không có tác dụng.
Câu trả lời:
Áp dụng điều này cho đầu tiên của bạn <td>:
padding-right:10px;Ví dụ HTML:
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>border-collapse: separate(đã có một typo trong phiên âm separateở trên)
border-spacing: 5px;
border-spacingcũng thêm khoảng cách giữa các hàng. Thật không may, không có một thuộc tính riêng biệt cho khoảng cách dọc và ngang.
border-spacingnhận hai đối số - một cho hàng ngang và một cho hàng dọc.
Một lời cảnh báo: mặc dù padding-rightcó thể giải quyết vấn đề cụ thể (trực quan) của bạn, nhưng đó không phải là cách phù hợp để thêm khoảng cách giữa các ô trong bảng. Điều gì xảy padding-rightra với một ô tương tự như những gì nó làm với hầu hết các phần tử khác: nó thêm không gian trong ô. Nếu các ô không có đường viền hoặc màu nền hoặc thứ gì đó khác khiến trò chơi mất đi, điều này có thể bắt chước hiệu ứng của việc thiết lập khoảng cách giữa các ô, nhưng không giống như cách khác.
Như ai đó đã lưu ý, thông số kỹ thuật về lề bị bỏ qua cho các ô trong bảng:
Đặc tả CSS 2.1 - Bảng - Bố cục trực quan của nội dung bảng
Các phần tử bảng bên trong tạo ra các hộp hình chữ nhật có nội dung và đường viền. Các tế bào cũng có đệm. Các phần tử bảng bên trong không có lề.
Cách "đúng" sau đó là gì? Nếu bạn đang tìm cách thay thế cellspacingthuộc tính của bảng, thì border-spacing(đã border-collapsetắt) là một sự thay thế. Tuy nhiên, nếu yêu cầu "lề" cho mỗi ô, tôi không chắc làm thế nào để đạt được điều đó một cách chính xác bằng cách sử dụng CSS. Cách duy nhất tôi có thể nghĩ đến là sử dụng paddingnhư trên, tránh bất kỳ kiểu dáng nào của các ô (màu nền, đường viền, v.v.) và thay vào đó sử dụng các DIV vùng chứa bên trong các ô để thực hiện kiểu như vậy.
Tôi không phải là chuyên gia CSS, vì vậy tôi có thể sai ở phần trên (điều này thật tuyệt nếu biết! Tôi cũng muốn có giải pháp CSS lề ô bảng).
Chúc mừng!
Nếu bạn không thể sử dụng đệm (ví dụ: bạn có đường viền trong td), hãy thử điều này
table {
border-collapse: separate;
border-spacing: 2px;
}Tôi nhận thấy điều này khá muộn, nhưng đối với bản ghi, bạn cũng có thể sử dụng bộ chọn CSS để thực hiện việc này (loại bỏ sự cần thiết của các kiểu nội tuyến.) CSS này áp dụng đệm cho cột đầu tiên của mỗi hàng:
table > tr > td:first-child { padding-right:10px }Và đây sẽ là HTML của bạn, không có CSS !:
<table><tr><td>data</td><td>more data</td></tr></table>Điều này cho phép đánh dấu thanh lịch hơn nhiều, đặc biệt là trong trường hợp bạn cần thực hiện nhiều định dạng cụ thể với CSS.
Rất tiếc, lề không hoạt động trên các ô riêng lẻ, tuy nhiên bạn có thể thêm các cột bổ sung giữa hai ô mà bạn muốn đặt khoảng cách giữa ... một tùy chọn khác là sử dụng đường viền có cùng màu với nền ...
Bạn chỉ có thể làm điều đó:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>Không cần CSS :) 10px này là không gian của bạn.
Sử dụng biên giới-thu gọn: tách biệt; không phù hợp với tôi, bởi vì tôi chỉ cần một lề ở giữa các ô trong bảng không phải ở hai bên của bảng.
Tôi đã đưa ra giải pháp tiếp theo:
- CSS
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}- HTML
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>Giải pháp này phù hợp với tdnhững nhu cầu cần thiết bordervà paddingtạo kiểu tóc.
(Đã thử nghiệm trên Chrome 32, IE 11, Firefox 25)
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td's we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class='col1'>Player</td>
<td class='col2'>Result</td>
<td class='col3'>Average</td>
</tr>
</table>Cập nhật năm 2016
Firefox hiện hỗ trợ nó mà không có inline-blockvà một bộwidth
table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }
/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }<table>
<tr>
<td>Player</td>
<td>Result</td>
<td>Average</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Player</div>
<div class="td">Result</div>
<div class="td">Average</div>
</div>
</div>Bạn không thể tách các cột riêng lẻ trong một ô theo cách đó. Theo tôi, tùy chọn tốt nhất của bạn là thêm một style='padding-left:10px'vào cột thứ hai và áp dụng các kiểu trên một div hoặc phần tử bên trong. Bằng cách này, bạn có thể đạt được ảo tưởng về một không gian rộng lớn hơn.
Nếu bạn có quyền kiểm soát chiều rộng của bảng, hãy chèn một khoảng đệm bên trái trên tất cả các ô của bảng và chèn một lề âm bên trái trên toàn bộ bảng.
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}Lưu ý, chiều rộng của bảng cần bao gồm chiều rộng phần đệm / lề. Sử dụng phần trên làm ví dụ, chiều rộng trực quan của bảng sẽ là 700px.
Đây không phải là giải pháp tốt nhất nếu bạn đang sử dụng đường viền trên các ô trong bảng của mình.
Tôi tìm thấy cách tốt nhất để giải quyết vấn đề này là kết hợp thử và sai và đọc những gì được viết trước tôi:
Như bạn có thể thấy, tôi có một số thứ khá phức tạp đang diễn ra ... nhưng động lực chính giúp điều này trở nên đẹp mắt là:
PARENT ELEMENT (UL): biên giới-sụp đổ: tách biệt; khoảng cách đường viền: .25em; margin-left: -.25em;
PHẦN TỬ CON (LI): display: table-cell; vertical-align: giữa;
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }Theo giải pháp của Cian về việc đặt đường viền thay cho lề, tôi phát hiện ra bạn có thể đặt màu đường viền thành trong suốt để tránh phải trùng màu với nền. Hoạt động trong FF17, IE9, Chrome v23. Có vẻ như đây là một giải pháp tốt với điều kiện là bạn không cần phải có đường viền thực tế.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>Sử dụng padding là cách làm không đúng, có thể thay đổi giao diện nhưng không như ý muốn. Điều này có thể giải quyết vấn đề của bạn.
Bạn có thể sử dụng cả hai:
padding-right:10px;
padding-right:10%;Nhưng tốt hơn nên sử dụng với % .
%
Nếu padding không hiệu quả với bạn, một công việc khác là thêm các cột bổ sung và đặt lề thông qua chiều rộng bằng cách sử dụng <colgroup>. Không có giải pháp đệm nào ở trên phù hợp với tôi vì tôi đang cố tạo cho chính đường viền ô một lề và đây là điều cuối cùng đã giải quyết được vấn đề:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>Tạo kiểu cho đường viền của các ô trong bảng bằng cách sử dụng: nth-child để các cột thứ 2 và thứ 3 dường như là một cột duy nhất.
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }