Bagaimana cara menghapus ruang yang tidak diinginkan antara baris dan kolom dalam tabel?

177

Bagaimana cara menghapus ruang ekstra antara baris dan kolom dalam tabel.

Saya sudah mencoba mengubah margin, padding, dan berbagai properti perbatasan di atas meja dan tr dan td.

Saya ingin semua gambar berada tepat di sebelah satu sama lain agar terlihat seperti satu gambar besar.

Bagaimana saya memperbaikinya?

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
sumber

84

Tambahkan reset CSS ini ke kode CSS Anda: ( Dari sini )

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

Ini akan mereset CSS secara efektif, menghilangkan padding dan margin.

— vektran
sumber

15

Ada komentar jika Anda membaca pepatah: / * tabel masih membutuhkan 'cellspacing = "0"' di markup * /

— easwee

2

apa yang terjadi jika Anda menggunakan banyak css di halaman Anda dan Anda tidak ingin mengatur ulang?

— Sevenearths

Ini mungkin praktik terbaik untuk menggunakan reset atau semacam kerangka kerja dan membangun dari sana. Namun dalam hal ini Anda harus mengatur ulang setiap gaya yaitu. table {padding: 0px; perbatasan: 0px; border-collapse: runtuh; dll} .... Periksa quirksmode.org/css/tables.html untuk informasi lebih lanjut.

— vectran

Anda dapat melewati banyak dari mereka karena hanya untuk tabel.

— Cai Haoyang

31

Ini berlebihan, tidak menjawab pertanyaan, dan bahkan bukan pengaturan ulang penuh. Mungkin mengisolasi kode yang relevan, menjelaskannya, dan kemudian menyarankan menggunakan reset.

— Sandy Gifford

198

Menambahkan ke jawaban vectran: Anda juga harus menetapkan cellspacingatribut pada elemen tabel untuk kompatibilitas lintas-browser.

<table cellspacing="0">

EDIT (demi kelengkapan saya memperluas ini 5 tahun kemudian :):

Internet Explorer 6 dan Internet Explorer 7 mengharuskan Anda untuk mengatur cellspacing secara langsung sebagai atribut tabel, jika tidak spasi tidak akan hilang.

Internet Explorer 8 dan versi yang lebih baru dan semua versi browser populer lainnya - Chrome, Firefox, Opera 4+ - mendukung penataan batas properti CSS .

Jadi untuk membuat reset spasi sel tabel browser lintas (mendukung IE6 sebagai browser dinosaurus), Anda dapat mengikuti contoh kode di bawah ini:

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>

Luaskan cuplikan

— Easwee
sumber

68

Ini bekerja untuk saya:

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

— pagetribe
sumber

55

Untuk gambar di td, gunakan ini untuk gambar:

display: block;

Itu menghilangkan ruang yang tidak diinginkan untuk saya

— Jacob Bertelsen
sumber

9

Cukup tambahkan di atas jawaban Yakub, untuk imgdi td,

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

Ini berfungsi untuk sebagian besar klien email, termasuk Gmail. Tapi bukan Outlook. Untuk tinjauan, Anda perlu melakukan dua langkah lagi:

table {border-collapse: collapse;}

dan mengatur setiap tdelemen untuk memiliki gambar yang sama heightdan widthseperti yang terkandung di dalamnya. Sebagai contoh,

<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
sumber

8

table 
{
    border-collapse: collapse;
}

akan menutup semua batas yang memisahkan kolom tabel ...

atau coba

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

lakukan semua spasi sel ke 0 dan batas 0 untuk mencapai yang sama.

bersenang-senang!

— Aamir Shahzad
sumber

1

<table cellspacing="0" border-spacing: 0;>tidak valid markup! <table cellspacing="0" style="border-spacing: 0;">akan benar

— Dirk von Grünigen

8

Untuk HTML5 yang memenuhi standar tambahkan semua css ini untuk menghapus semua ruang di antara gambar dalam tabel:

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

— benar-benar memalukan
sumber

5

Coba ini,

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

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

— Rakesh Vadnal
sumber

4

mengatur Cellpadding dan cellspacing ke 0 akan menghapus ruang yang tidak perlu antara baris dan kolom ...

— Vijay
sumber

3

Yang harus saya lakukan adalah menambahkan:

line-height: 0px;

di saya

<tr ...>

— Ángel Ramírez Isea
sumber

Ada jawaban lain yang memberikan pertanyaan OP, dan mereka diposting beberapa waktu lalu. Saat mengirim jawaban, pastikan Anda menambahkan solusi baru, atau penjelasan yang jauh lebih baik, terutama saat menjawab pertanyaan yang lebih lama.

— help-info.de

1

menambahkan baris ini ke awal file berfungsi untuk saya:

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

memodifikasi css untuk mengatur properti perbatasan yang tepat tidak berfungsi sampai saya menambahkan baris di atas

— Albert s
sumber

Ini adalah SATU-SATUNYA hal yang berhasil untuk saya! +1 dan TERIMA KASIH! Saya mengaturnya ke Strict bukan transisi.

— Scott Biggs

0

Sudahkah Anda mencoba menghapus TR yang memiliki colspan dan melihat apakah ada perubahan?

Saya telah mengalami colspans dan rowspans yang cukup buruk ketika datang ke desain tabel yang akurat. Jika gambar Anda terlihat baik-baik saja tanpa colspan-TRs, saya akan mulai dari sana dan membuat tableset bersarang.

Style.css Anda juga tampaknya tidak lengkap, mungkin ada yang salah di sana? Saya setidaknya akan menambah padding: 0; margin: 0;tabel (atau ke kelas "mytable"). Pastikan, gambar Anda tidak memiliki spasi dan / atau batas juga (misalnya dengan menambahkan img { border: 0; }ke lembar gaya Anda).

— Select0r
sumber

menghapus TR dengan colspan tidak melakukan apa-apa. menambahkan padding dan margin tidak menghasilkan apa-apa

— Zach Galant

0

Saya punya masalah ini dan tidak ada saran dari beberapa posting yang berhasil, saya mencoba semuanya. Masalah saya ternyata tabel yang saya buat bersarang di tabel lain, mewarisi sifat-sifatnya. Saya perlu mengganti tabel kontainer.

Dalam contoh ini, SuColTable adalah kelas di atas meja.

.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

Perbatasan-runtuh, perbatasan: tidak ada dan spasi-batas menyingkirkan garis tabel / baris / kolom. Panggilan 0 padding menyingkirkan padding dari tabel kontainer. Saya harus memasukkan! Penting pada setiap gaya untuk itu bekerja, agar dapat menimpa gaya tabel kontainer.

Saya memiliki padding_top, kiri dan bawah (bukan hanya padding) karena saya memiliki dua kelas lain yang mengontrol padding_right.

line-height: 0px;

Garis-tinggi nol membuat baris menjadi satu baris tinggi. Jika Anda memiliki beberapa baris, mereka dikompresi menjadi satu baris.

— George
sumber

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

Luaskan cuplikan

— Ikeanyi kenechukwu
sumber

Ada jawaban lain yang memberikan pertanyaan OP, dan mereka diposting beberapa waktu lalu. Saat mengirim jawaban, pastikan Anda menambahkan solusi baru, atau penjelasan yang jauh lebih baik, terutama saat menjawab pertanyaan yang lebih lama.

— help-info.de