Khoảng cách giữa các cột html

Question

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
}
</style>
</head>
<body>

<h2>Specify the Gap Between Columns</h2>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
</div>

</body>
</html>

Xem ví dụ

Tôi có một bảng HTML. Tôi cần có khoảng cách giữa các cột trong bảng, nhưng không phải các hàng trong bảng.

Nếu tôi sử dụng thuộc tính cellspacingCSS, nó thực hiện nó giữa cả hàng và cột. Tôi cũng không thể sử dụng CSS trong những gì tôi đang làm. Tôi cần sử dụng HTML thuần túy.

html

70 hữu ích 2 bình luận 268k xem chia sẻ

answer

40

Nếu bạn có thể sử dụng kiểu nội dòng, bạn có thể đặt phần đệm bên trái và bên phải trên mỗi td.. Hoặc bạn sử dụng phần bổ sung tdgiữa các cột và đặt một số khoảng trắng không ngắt như @rene vui lòng đề xuất.

http://jsfiddle.net/u5mN4/

http://jsfiddle.net/u5mN4/1/

Cả hai đều khá xấu; p css ftw

40 hữu ích 1 bình luận chia sẻ

answer

48

Cách tiếp cận tốt hơn chỉ sử dụng quy tắc css của Shredder: padding: 0 15px 0 15px thay vì css nội tuyến, xác định quy tắc css áp dụng cho tất cả các tds. Thực hiện việc này bằng cách sử dụng thẻ kiểu trong trang của bạn:

<style type="text/css">
td
{
    padding:0 15px;
}
</style>

hoặc cung cấp cho bảng một lớp như "paddingBetweenCols" và sử dụng css của trang web

.paddingBetweenCols td
{
    padding:0 15px;
}

Phương pháp tiếp cận css trang xác định một quy tắc trung tâm có thể được sử dụng lại bởi tất cả các trang.

Nếu bạn muốn sử dụng phương pháp tiếp cận css của trang web, tốt nhất nên xác định một lớp như trên và áp dụng phần đệm cho lớp đó ... trừ khi bạn muốn tất cả các td trên toàn bộ trang web có cùng một quy tắc được áp dụng.

Khó sử dụng thẻ phong cách

Khó sử dụng css site

48 hữu ích 0 bình luận chia sẻ

answer

11

<table cellpadding="pixels"cellspacing="pixels"></table>
<td align="position"valign="position"></td>

cellpadding= "length in pixel" ~ Thuộc tính cellpadding, được sử dụng trong <table>thẻ, chỉ định bao nhiêu khoảng trống để hiển thị giữa nội dung của mỗi ô trong bảng và đường viền tương ứng của nó. Giá trị được xác định là chiều dài tính bằng pixel. Do đó, một cellpadding="10"cặp giá trị-thuộc tính sẽ hiển thị 10 pixel không gian trống trên cả bốn cạnh của nội dung của mỗi ô trong bảng đó.

cellspacing= "length in pixel" ~ Thuộc tính cellspacing, cũng được sử dụng trong <table>thẻ, xác định bao nhiêu khoảng trống để hiển thị giữa các ô bảng liền kề và giữa các ô bảng và đường viền bảng. Giá trị được xác định là chiều dài tính bằng pixel. Do đó, một cellspacing="10"cặp giá trị-thuộc tính sẽ phân tách theo chiều ngang và chiều dọc tất cả các ô liền kề trong bảng tương ứng với độ dài 10 pixel. Nó cũng sẽ bù đắp tất cả các ô từ khung của bảng trên cả bốn cạnh với độ dài 10 pixel.

11 hữu ích 1 bình luận chia sẻ

answer

9

Trong hầu hết các trường hợp, tốt hơn là chỉ nên đệm các cột ở bên phải để khoảng cách giữa các cột được đệm và cột đầu tiên vẫn được căn chỉnh với bảng.

CSS:

.padding-table-columns td
{
    padding:0 5px 0 0; /* Only right padding*/
}

HTML:

<table className="padding-table-columns">
  <tr>
    <td>Cell one</td>
     <!-- There will be a 5px space here-->
    <td>Cell two</td>
     <!-- There will be an invisible 5px space here-->
  </tr>
</table>

9 hữu ích 0 bình luận chia sẻ

answer

2

Điều này có thể đạt được bằng cách đặt đệm giữa các cột bằng cách sử dụng CSS. Bạn có thể thêm phần đệm vào bên trái của tất cả các cột ngoại trừ cột đầu tiên hoặc thêm phần đệm vào bên phải của tất cả các cột ngoại trừ cột cuối cùng. Bạn nên tránh thêm phần đệm vào bên phải của cột cuối cùng hoặc bên trái của cột đầu tiên vì điều này sẽ chèn khoảng trắng dư thừa. Bạn cũng nên tránh quá quy định với các lớp để chỉ định cột nào nên có phần đệm bổ sung vì điều này sẽ khiến việc bảo trì khó khăn hơn nếu sau này bạn thêm cột mới.

Các ' selector lobotomised cú ' cho phép bạn chọn tất cả các anh chị em, không phân biệt nếu họ là một th, tdhay cái gì khác.

tr > * + * {
  padding-left: 4em;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

2 hữu ích 0 bình luận chia sẻ