วิธีการลบช่องว่างที่ไม่ต้องการระหว่างแถวและคอลัมน์ในตาราง?

178

ฉันจะลบช่องว่างพิเศษระหว่างแถวและคอลัมน์ในตารางได้อย่างไร

ฉันได้ลองเปลี่ยนมาร์จิ้นการแพ็ดดิ้งและคุณสมบัติเส้นขอบต่างๆบนโต๊ะและ tr และ td

ฉันต้องการให้ภาพทั้งหมดอยู่ติดกันเพื่อให้ดูเหมือนภาพใหญ่หนึ่งภาพ

ฉันจะแก้ไขได้อย่างไร

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>
html  css  html-table 
— Zach Galant
แหล่งที่มา

คำตอบ:

85

เพิ่มการรีเซ็ต CSS นี้เป็นรหัส CSS ของคุณ: ( จากที่นี่ )

/* 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;
}

มันจะรีเซ็ต CSS ได้อย่างมีประสิทธิภาพกำจัดการขยายและระยะขอบ

— Vectran
แหล่งที่มา
15
มีความคิดเห็นถ้าคุณอ่านว่า: / * ตารางยังต้องการ 'cellspacing = "0"' ในมาร์กอัพ * /
— easwee
2
จะเกิดอะไรขึ้นหากคุณใช้ css จำนวนมากในหน้าของคุณและคุณไม่ต้องการรีเซ็ตมัน
— สิบแปด
อาจเป็นวิธีที่ดีที่สุดในการใช้การรีเซ็ตหรือเฟรมเวิร์กและสร้างจากที่นั่น อย่างไรก็ตามในกรณีนี้คุณจะต้องรีเซ็ตแต่ละสไตล์เช่น ตาราง {padding: 0px; เส้นขอบ: 0px; การยุบชายแดน: การล่มสลาย; ฯลฯ } .... ชำระเงินquirksmode.org/css/tables.htmlสำหรับข้อมูลเพิ่มเติม
— vectran
คุณสามารถข้ามพวกเขาได้มากมายเนื่องจากเป็นเพียงตาราง
— Cai Haoyang
31
นี่มันมากเกินไปไม่ตอบคำถามและยังไม่ได้รีเซ็ตทั้งหมด อาจแยกรหัสที่เกี่ยวข้องอธิบายและแนะนำให้ใช้การรีเซ็ต
— Sandy Gifford
198

การเพิ่มคำตอบของ vectran: คุณต้องตั้งค่าcellspacingคุณลักษณะบนองค์ประกอบตารางเพื่อให้สามารถใช้งานร่วมกับเบราว์เซอร์

<table cellspacing="0">

แก้ไข (เพื่อความสมบูรณ์ฉันกำลังจะขยาย 5 ปีต่อมา :):

Internet Explorer 6และInternet Explorer 7กำหนดให้คุณตั้งค่าการเว้นวรรคเซลล์โดยตรงเป็นแอตทริบิวต์ตารางมิฉะนั้นระยะห่างจะไม่หายไป

Internet Explorer 8และรุ่นที่ใหม่กว่าและรุ่นอื่น ๆ ทั้งหมดของเบราว์เซอร์ที่นิยม - Chrome, Firefox, Opera 4+ - การสนับสนุนคุณสมบัติ CSS ชายแดนระยะห่าง

ดังนั้นในการตั้งค่าการเว้นวรรคเซลล์ข้ามตารางเบราว์เซอร์รีเซ็ต (สนับสนุน IE6 เป็นเบราว์เซอร์ไดโนเสาร์) คุณสามารถทำตามตัวอย่างโค้ดด้านล่าง:

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>
ขยายตัวอย่างข้อมูล

— easwee
แหล่งที่มา
55

สำหรับรูปภาพใน td ใช้สำหรับภาพ:

display: block;

ที่เอาพื้นที่ที่ไม่ต้องการสำหรับฉัน

— Jacob Bertelsen
แหล่งที่มา
9

เพียงแค่เพิ่มที่ด้านบนของคำตอบของยาโคบสำหรับimgในtd,

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

ใช้งานได้กับไคลเอนต์อีเมลส่วนใหญ่รวมถึง Gmail แต่ไม่ใช่ Outlook สำหรับมุมมองคุณต้องทำสองขั้นตอนเพิ่มเติม:

table {border-collapse: collapse;}

และตั้งค่าทุกtdองค์ประกอบให้เหมือนกันheightและwidthเป็นรูปภาพที่มีอยู่ ตัวอย่างเช่น,

<td width="600" height="80" style="line-height: 80px;">
    <img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" />
</td>
— hexinpeter
แหล่งที่มา
8 
table 
{
    border-collapse: collapse;
}

จะยุบเส้นขอบทั้งหมดแยกคอลัมน์ตาราง ...

หรือลอง

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

ทำทุกระยะห่างระหว่างเซลล์ถึง 0 และเว้นระยะห่างชายแดน 0 เพื่อให้บรรลุเดียวกัน

มีความสนุกสนาน!

— Aamir Shahzad
แหล่งที่มา
1
<table cellspacing="0" border-spacing: 0;>มาร์กอัปไม่ถูกต้อง! <table cellspacing="0" style="border-spacing: 0;">จะถูกต้อง
— Dirk von Grünigen
8

สำหรับ HTML5 ที่เป็นไปตามมาตรฐานให้เพิ่ม css นี้ทั้งหมดเพื่อลบช่องว่างทั้งหมดระหว่างรูปภาพในตาราง:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    padding:0px;
}
td img {
    display:block;
}
— totallytotallyamazing
แหล่งที่มา
4

การตั้งค่า Cellpadding และ cellspacing เป็น 0 จะลบช่องว่างที่ไม่จำเป็นระหว่างแถวและคอลัมน์ ...

— วีเจย์
แหล่งที่มา
4

สิ่งที่ฉันต้องทำคือเพิ่ม:

line-height: 0px;

ในของฉัน

<tr ...>
— ÁngelRamírez Isea
แหล่งที่มา
มีคำตอบอื่น ๆ ที่ให้คำถามของ OP และพวกเขาโพสต์เมื่อไม่นาน เมื่อโพสต์คำตอบโปรดตรวจสอบให้แน่ใจว่าคุณได้เพิ่มโซลูชันใหม่หรือคำอธิบายที่ดีขึ้นอย่างมากโดยเฉพาะเมื่อตอบคำถามรุ่นเก่า
— help-info.de
1

เพิ่มบรรทัดนี้ไปยังจุดเริ่มต้นของไฟล์ที่ทำงานสำหรับฉัน:

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

การแก้ไข css เพื่อตั้งค่าคุณสมบัติเส้นขอบที่เหมาะสมไม่ทำงานจนกว่าฉันจะเพิ่มบรรทัดข้างต้น

— อัลเบิร์ต
แหล่งที่มา
นี่คือสิ่งเดียวที่ใช้ได้สำหรับฉัน! +1 และขอบคุณ! ฉันตั้งมันไว้ที่เข้มงวดแทนที่จะเป็นหัวต่อหัวเลี้ยว
— Scott Biggs
0

คุณลองลบ TRs ที่มี colspan แล้วดูว่ามันเปลี่ยนอะไรไหม?

ฉันมีประสบการณ์ colspans และ rowspans จะน่ารังเกียจสวยเมื่อมันมาถึงการออกแบบตารางที่ถูกต้อง หากภาพของคุณดูไม่เป็นไรหากไม่มี colspan-TRs ฉันจะเริ่มจากตรงนั้นและสร้างชุดโต๊ะซ้อนกัน

สไตล์ของคุณยังไม่สมบูรณ์ดูเหมือนว่ามีอะไรผิดปกติบ้างไหม? อย่างน้อยฉันจะเพิ่มลงpadding: 0; margin: 0;ในตาราง (หรือลงในคลาส "mytable") ตรวจสอบให้แน่ใจว่าภาพของคุณไม่มีช่องว่างและ / หรือเส้นขอบเช่นกัน (เช่นโดยการเพิ่มimg { border: 0; }สไตล์ชีทของคุณ)

— Select0r
แหล่งที่มา
การลบ TR ด้วย colspan ไม่ได้ทำอะไรเลย การเพิ่มช่องว่างภายในและระยะขอบก็ไม่ได้ทำสิ่งใดเลย
— Zach Galant
0

ฉันมีปัญหานี้และไม่มีคำแนะนำใด ๆ จากการโพสต์หลายอย่างฉันจึงลองทั้งหมด ปัญหาของฉันกลับกลายเป็นว่าตารางที่ฉันสร้างกำลังซ้อนอยู่ในอีกตารางหนึ่งโดยสืบทอดคุณสมบัติของมัน ฉันต้องการแทนที่ตารางคอนเทนเนอร์

ในตัวอย่างนี้ SuColTable คือคลาสบนตาราง

.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

เส้นขอบการยุบขอบ: ไม่มีและการเว้นช่องว่างระหว่างเส้นขอบกำจัดเส้นตาราง / แถว / คอลัมน์ การเรียกช่องว่างภายใน 0 สายเรียกใช้กำจัดช่องว่างภายในออกจากตารางคอนเทนเนอร์ ฉันต้องรวม! สำคัญกับทุกสไตล์สำหรับมันเพื่อแทนที่สไตล์ตารางคอนเทนเนอร์

ฉันมี padding_top ด้านซ้ายและด้านล่าง (แทนที่จะเป็นเพียงการขยายเท่านั้น) เพราะฉันมีสองคลาสอื่น ๆ ที่ควบคุม padding_right

line-height: 0px;

ศูนย์ความสูงบรรทัดทำให้แถวสูงหนึ่งบรรทัด หากคุณมีหลายบรรทัดมันจะถูกบีบอัดเป็นหนึ่งบรรทัด

— จอร์จ
แหล่งที่มา
-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>
ขยายตัวอย่างข้อมูล

— Ikeanyi kenechukwu
แหล่งที่มา
มีคำตอบอื่น ๆ ที่ให้คำถามของ OP และพวกเขาโพสต์เมื่อไม่นาน เมื่อโพสต์คำตอบโปรดตรวจสอบให้แน่ใจว่าคุณได้เพิ่มโซลูชันใหม่หรือคำอธิบายที่ดีขึ้นอย่างมากโดยเฉพาะเมื่อตอบคำถามรุ่นเก่า
— help-info.de
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.