Làm thế nào để loại bỏ không gian không mong muốn giữa các hàng và cột trong bảng?


177

Làm cách nào để xóa khoảng trống thừa giữa các hàng và cột trong bảng.

Tôi đã thử thay đổi lề, phần đệm và các thuộc tính viền khác nhau trên bảng và tr và td.

Tôi muốn tất cả các hình ảnh ở ngay cạnh nhau trông giống như một hình ảnh lớn.

Làm thế nào tôi nên sửa lỗi này?

CSS

table {
  border-collapse: collapse;
}

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Tera Byte Video Game Creation Camp</title>
  <link rel="stylesheet" type="text/css" href="style.css"></link>
</head>

<body>
  <table class="mytable" align="center">
    <tr class="header">
      <td colspan="3"><img src="images/home_01.png" /></td>
    </tr>
    <tr class="top">
      <td colspan="3"><img src="images/home_02.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_03.png" /></td>
      <td><img src="images/home_04.png" /></td>
      <td><img src="images/home_05.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_07.png" /></td>
      <td><img src="images/home_06.png" /></td>
      <td><img src="images/home_08.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_09.png" /></td>
      <td><img src="images/home_10.png" /></td>
      <td><img src="images/home_11.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_12.png" /></td>
      <td><img src="images/home_13.png" /></td>
      <td><img src="images/home_14.png" /></td>
    </tr>
    <tr class="bottom">
      <td colspan="3"><img src="images/home_15.png" /></td>
    </tr>
  </table>

</body>

</html>

Câu trả lời:


84

Thêm thiết lập lại CSS này vào mã CSS của bạn: ( Từ đây )

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Nó sẽ thiết lập lại CSS một cách hiệu quả, loại bỏ phần đệm và lề.


15
Có một nhận xét nếu bạn đọc nói: / * bảng vẫn cần 'cellspaces = "0"' trong phần đánh dấu * /
Easwee

2
Điều gì xảy ra nếu bạn đang sử dụng nhiều css trong trang của mình và bạn không muốn đặt lại nó?
Thứ bảy

Có lẽ cách tốt nhất là sử dụng thiết lập lại hoặc một số loại khung và xây dựng từ đó. Tuy nhiên trong trường hợp này, bạn sẽ phải thiết lập lại từng kiểu tức là. bảng {đệm: 0px; viền: 0px; sụp đổ biên giới: sụp đổ; vv} .... Thanh toán quirksmode.org/css/tables.html để biết thêm.
vectran

Bạn có thể bỏ qua rất nhiều trong số chúng vì nó chỉ dành cho các bảng.
Cai Haoyang

31
Điều này là quá mức, không trả lời câu hỏi và thậm chí không phải là thiết lập lại đầy đủ. Có lẽ cô lập mã có liên quan, giải thích nó và sau đó đề xuất sử dụng thiết lập lại.
Sandy Gifford

197

Thêm vào câu trả lời của vectran: Bạn cũng phải đặt cellspacingthuộc tính trên thành phần bảng để tương thích trình duyệt chéo.

<table cellspacing="0">

EDIT (vì mục đích hoàn chỉnh Tôi sẽ mở rộng 5 năm sau :):

Internet Explorer 6trình duyệt Internet Explorer 7 đòi hỏi bạn phải thiết lập cellspacing trực tiếp như một thuộc tính bảng, nếu không khoảng cách sẽ không biến mất.

Internet Explorer 8 và các phiên bản mới hơn và tất cả các phiên bản khác của trình duyệt phổ biến - Chrome, Firefox, Opera 4+ - hỗ trợ khoảng cách viền thuộc tính CSS .

Vì vậy, để thiết lập lại khoảng cách giữa các ô của trình duyệt chéo (hỗ trợ IE6 làm trình duyệt khủng long), bạn có thể làm theo mẫu mã dưới đây:

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}
<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>


68

Điều này làm việc cho tôi:

#table {
  border-collapse: collapse;
  border-spacing: 0;
}

55

Đối với hình ảnh trong td, sử dụng điều này cho hình ảnh:

display: block;

Điều đó loại bỏ không gian không mong muốn cho tôi


9

Chỉ cần thêm vào đầu câu trả lời của Jacob, cho imgtd,

body {line-height: 0;}
img {display: block; vertical-align: bottom;}

Điều này hoạt động cho hầu hết các ứng dụng email, bao gồm cả Gmail. Nhưng không phải Outlook. Để triển vọng, bạn cần làm thêm hai bước:

table {border-collapse: collapse;}

và đặt mọi tdyếu tố để có cùng heightwidthnhư hình ảnh chứa trong nó. Ví dụ,

<td width="600" height="80" style="line-height: 80px;">
    <img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" />
</td>

8
table 
{
    border-collapse: collapse;
}

sẽ thu gọn tất cả các đường viền ngăn cách các cột của bảng ...

hay là thử

<table cellspacing="0" style="border-spacing: 0;">

thực hiện tất cả các khoảng cách ô đến 0 và khoảng cách biên 0 để đạt được như nhau.

chúc bạn vui vẻ


1
<table cellspacing="0" border-spacing: 0;>là đánh dấu không hợp lệ! <table cellspacing="0" style="border-spacing: 0;">sẽ đúng
Dirk von Grünigen

8

Đối với HTML5 tuân thủ tiêu chuẩn, thêm tất cả css này để xóa tất cả khoảng trống giữa các hình ảnh trong bảng:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    padding:0px;
}
td img {
    display:block;
}

5

Thử cái này,

table{
border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, 
table th{
padding: 0; /* 'cellpadding' equivalent */
}

4

đặt Cellpadding và cellspaces thành 0 sẽ xóa khoảng trống không cần thiết giữa các hàng và cột ...


3

Tất cả tôi phải làm là thêm:

line-height: 0px;

trong tôi

<tr ...>

Có những câu trả lời khác cung cấp câu hỏi của OP và chúng đã được đăng cách đây một thời gian. Khi đăng câu trả lời, vui lòng đảm bảo bạn thêm một giải pháp mới hoặc giải thích rõ ràng hơn, đặc biệt là khi trả lời các câu hỏi cũ hơn.
help-info.de

1

thêm dòng này vào đầu tập tin làm việc cho tôi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sửa đổi css để đặt thuộc tính đường viền phù hợp không hoạt động cho đến khi tôi thêm dòng trên


Đây là điều DUY NHẤT làm việc cho tôi! +1 và CẢM ƠN BẠN! Tôi đã đặt nó thành Nghiêm thay vì chuyển tiếp.
Scott Biggie

0

Bạn đã thử loại bỏ các TR có colspan và xem nó có thay đổi gì không?

Tôi đã có kinh nghiệm về colspans và rowpans để trở nên khá khó chịu khi nói đến các thiết kế bảng chính xác. Nếu hình ảnh của bạn trông ổn mà không có colspan-TR, tôi sẽ bắt đầu từ đó và xây dựng một bảng biểu lồng nhau.

Ngoài ra style.css của bạn dường như chưa hoàn thành, có thể có điều gì đó không đúng ở đó? Ít nhất tôi sẽ thêm padding: 0; margin: 0;vào bảng (hoặc vào lớp "mytable"). Đảm bảo, hình ảnh của bạn cũng không có khoảng trắng và / hoặc viền (ví dụ: bằng cách thêm img { border: 0; }vào biểu định kiểu của bạn).


loại bỏ TR với một colspan không làm gì cả. thêm phần đệm và lề cũng không có gì
Zach Galant

0

Tôi đã có vấn đề này và không có gợi ý nào từ một số bài viết hoạt động, tôi đã thử tất cả. Vấn đề của tôi hóa ra là bảng tôi đang tạo được lồng trong một bảng khác, kế thừa các thuộc tính của nó. Tôi cần phải ghi đè lên bảng container.

Trong ví dụ này, SuColTable là lớp trên bảng.

.SuColTable tr {
    border: none !important;
}

.SuColTable td {
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}


.SuColTable {
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
// all padding would be padding: 0 !important

Sự sụp đổ đường viền, đường viền: không có và khoảng cách đường viền thoát khỏi dòng bảng / hàng / cột. Các cuộc gọi đệm 0 thoát khỏi phần đệm từ bảng container. Tôi phải bao gồm! Quan trọng về mọi kiểu dáng cho nó hoạt động, để ghi đè lên các kiểu bảng container.

Tôi có padding_top, bên trái và dưới cùng (thay vì chỉ đệm) bởi vì tôi có hai lớp khác điều khiển padding_right.

line-height: 0px;

Chiều cao dòng 0 làm cho hàng cao một hàng. Nếu bạn có một vài dòng, chúng được nén thành một dòng.


-2

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}
<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>


Có những câu trả lời khác cung cấp câu hỏi của OP và chúng đã được đăng cách đây một thời gian. Khi đăng câu trả lời, vui lòng đảm bảo bạn thêm một giải pháp mới hoặc giải thích rõ ràng hơn, đặc biệt là khi trả lời các câu hỏi cũ hơn.
help-info.de
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.