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?

138

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.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?

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

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

Làm cách nào để khắc phục sự cố 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>

Nguồn

2010-02-17 Zach Galant

Thêm reset CSS này để mã CSS của bạn: (From here)

/* 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 hiệu quả, loại bỏ phần đệm và lề.

Nguồn

2010-02-17 09:26:25 vectran

cảm ơn. đã hoạt động. –

+12

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

vâng, đó cũng là một phần của nó. cảm ơn –

Bạn đã cố gắng loại bỏ các TRS có một colspan và xem nếu nó thay đổi bất cứ điều gì?

Tôi đã trải qua các colspans và rowspans là khá khó chịu khi nói đến 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-TRs, tôi bắt đầu từ đó và xây dựng một bảng lồng nhau.

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

Nguồn

2010-02-17 09:12:29 Select0r

xóa TR bằng colspan không có gì. thêm phần đệm và lề không có gì là –

thiết cellpadding và cellspacing 0 sẽ loại bỏ các không gian không cần thiết giữa các hàng và cột ...

Nguồn

2010-02-17 09:19:11 Vijay

161

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

<table cellspacing="0">

EDIT (vì lợi ích của sự hoàn chỉnh tôi đang mở rộng này 5 năm sau :):

Internet Explorer 6 và 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 thì khoảng cách sẽ không biến mất.

Internet Explorer 8 và các phiên bản sau và tất cả các phiên bản khác của các trình duyệt phổ biến - Chrome, Firefox, Opera 4+ - hỗ trợ CSS tài sản border-spacing.

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

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>

Nguồn

2010-02-17 09:26:54 easwee

phần cố định của nó. cảm ơn –

cảm ơn! đã giúp –

Điều này khắc phục sự cố tôi đang tìm cách khắc phục, cảm ơn bạn đời! :) – codepleb

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

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

Nguồn

2010-09-17 00:13:09 pagetribe

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

display: block;

Đó loại bỏ không gian không mong muốn đối với tôi

Nguồn

2012-01-02 13:54:57

nó hoạt động cho tôi –

Cảm ơn bạn, cũng làm việc tốt với tôi. – monteirobrena

Hãy thử điều này,

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

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

Nguồn

2012-12-27 12:26:41

table 
{ 
    border-collapse: collapse; 
}

sẽ sụp đổ tất cả biên giới ngăn cách các cột bảng ...

hoặc thử

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

thực hiện tất cả khoảng cách ô đến 0 và khoảng cách đường viền 0 để đạt được điều này.

có một niềm vui!

Nguồn

2013-03-20 05:55:19

' là đánh dấu không hợp lệ! '

' sẽ chính xác –

có bạn đúng Tôi đã cập nhật câu trả lời ... cảm ơn –

Đối với tiêu chuẩn phù hợp HTML5 thêm tất cả css này để loại bỏ tất cả các không gian giữa các hình ảnh trong bảng:

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

Nguồn

2014-05-21 20:47:27 totallytotallyamazing

Tôi đã thiếu 'padding: 0px'. Thêm nó đã làm các trick! – Misiu

thêm dòng này vào đầu của tập tin s 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 thích hợp không hoạt động cho đến khi tôi thêm dòng trên

Nguồn

2014-11-20 17:15:28

Đây là điều duy nhất làm việc cho tôi! 1 và THANK YOU! Tôi đã đặt nó thành Nghiêm ngặt thay vì chuyển tiếp. –

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

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

Điều này phù hợp với hầu hết các ứng dụng email, kể cả Gmail. Nhưng không phải Outlook. Đối với triển vọng, bạn cần phải thực hiện hai bước nữa:

table {border-collapse: collapse;}

và thiết lập mỗi td yếu tố để có cùng height và width như hình ảnh chứa của 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>

Nguồn

2015-06-26 04:37:14 hexinpeter

Các vấn đề liên quan

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?

Trả lời

Các vấn đề liên quan