Tablodaki satırlar ve sütunlar arasındaki istenmeyen alan nasıl kaldırılır?

178

Tablodaki satırlar ve sütunlar arasındaki fazla boşluğu nasıl kaldırabilirim?

Tablo ve tr ve td kenar boşluğu, dolgu ve çeşitli kenarlık özelliklerini değiştirmeyi denedim.

Tüm resimlerin yan yana olmasını ve büyük bir resim gibi görünmesini istiyorum.

Bunu nasıl düzeltmeliyim?

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
kaynak

85

Bu CSS sıfırlamasını CSS kodunuza ekleyin: ( Buradan )

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

Dolgu ve kenar boşluklarından kurtularak CSS'yi etkili bir şekilde sıfırlar.

— Vectran
kaynak

15

— Şunu okuduysanız

2

sayfanızda çok fazla css kullanıyorsanız ve sıfırlamak istemiyorsanız ne olur?

— Yedi Yıl

Sıfırlama veya bir tür çerçeve kullanmak ve oradan inşa etmek muhtemelen en iyi uygulamadır. Ancak bu durumda her stili sıfırlamanız gerekir. tablo {dolgu: 0 piksel; sınır: 0 piksel; sınır çöküşü: çöküş; vb} .... Daha fazla bilgi için quirksmode.org/css/tables.html adresine bakın.

— vectran

Sadece tablolar için olduğu için birçoğunu atlayabilirsiniz.

— Cai Haoyang

31

Bu aşırı, soruyu cevaplamıyor ve tam bir sıfırlama bile değil. Belki de ilgili kodu izole edin, açıklayın ve ardından sıfırlama kullanmanızı öneririz.

— Sandy Gifford

198

Vectran'ın cevabına ekleme: Ayrıca, cellspacingtarayıcılar arası uyumluluk için tablo öğesinde nitelik ayarlamanız gerekir .

<table cellspacing="0">

EDIT (bütünlük uğruna bunu 5 yıl sonra genişletiyorum :):

Internet Explorer 6 ve Internet Explorer 7, hücre aralığını doğrudan tablo özniteliği olarak ayarlamanızı gerektirdi , aksi takdirde boşluk kaybolmaz.

Internet Explorer 8 ve sonraki sürümleri ve popüler tarayıcıların diğer tüm sürümleri - Chrome, Firefox, Opera 4+ - CSS özelliği sınır aralığını destekler .

Bu nedenle, tarayıcılar arası bir tablo hücre aralığı sıfırlaması yapmak için (bir dinozor tarayıcısı olarak IE6'yı destekler), aşağıdaki kod örneğini takip edebilirsiniz:

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>

Snippet'i genişlet

— easwee
kaynak

68

Bu benim için çalıştı:

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

— pagetribe
kaynak

55

TD'deki görüntüler için, görüntülerde bunu kullanın:

display: block;

Bu benim için istenmeyen alanı ortadan kaldırıyor

— Jacob Bertelsen
kaynak

9

Sadece için, Yakup'un cevabı üzerine ekleyerek imgde td,

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

Bu, Gmail dahil çoğu e-posta istemcisi için geçerlidir. Ancak Outlook değil. Görünüm için iki adım daha yapmanız gerekir:

table {border-collapse: collapse;}

her tdöğeyi aynı heightve widthiçerdiği görüntülere sahip olacak şekilde ayarlayın. Örneğin,

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

8

table 
{
    border-collapse: collapse;
}

tablo sütunlarını ayırarak tüm kenarlıkları daraltır ...

veya Dene

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

bunu elde etmek için tüm hücre aralığını 0 ve sınır aralığını 0 yapın.

eğlenin!

— Aamir Shahzad
kaynak

1

<table cellspacing="0" border-spacing: 0;>geçersiz biçimlendirme! <table cellspacing="0" style="border-spacing: 0;">doğru olurdu

— Dirk von Grünigen

8

Standartlarla uyumlu HTML5 için, tablolardaki görüntüler arasındaki tüm alanı kaldırmak için tüm bu css'leri ekleyin:

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

— totallytotallyamazing
kaynak

5

Bunu dene,

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

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

— Rakesh Vadnal
kaynak

4

Cellpadding ve cellspacing değerini 0 olarak ayarlamak satırlar ve sütunlar arasındaki gereksiz boşluğu kaldıracaktır ...

— Vijay
kaynak

4

Tek yapmam gereken eklemektir:

line-height: 0px;

benim .. De

<tr ...>

— Ángel Ramírez Isea
kaynak

OP'nin sorusunu sağlayan başka cevaplar da var ve bunlar bir süre önce yayınlandı. Bir yanıt gönderirken, lütfen özellikle eski soruları yanıtlarken yeni bir çözüm veya çok daha iyi bir açıklama eklediğinizden emin olun.

— help-info.de

1

bu satırı dosyanın başlangıcına eklemek benim için çalıştı:

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

Yukarıdaki satırı ekleyene kadar uygun kenarlık özelliklerini ayarlamak için css üzerinde değişiklik yapmadı

— Albert s
kaynak

Bu benim için işe yarayan tek şey! +1 ve TEŞEKKÜR EDERİZ! Geçiş yerine Sıkı olarak ayarlamıştım.

— Scott Biggs

0

Bir soğanı olan TR'leri kaldırmayı ve bir şey değiştirip değiştirmediğini görmeyi denediniz mi?

Doğru masa tasarımları söz konusu olduğunda colspans ve rowspans oldukça kötü oldum. Resimleriniz colspan-TR'ler olmadan iyi görünüyorsa, oradan başlayıp iç içe bir tablo kümesi oluştururdum.

Ayrıca style.css'niz tam görünmüyor, belki orada yanlış bir şey var mı? En azından padding: 0; margin: 0;tabloya (veya "mytable" sınıfına) eklerdim. Resimlerinizde boşluk ve / veya kenarlık da olmadığından emin olun (örn img { border: 0; }. Stil sayfanıza ekleyerek ).

— Select0r
kaynak

TR'lerin bir colspan ile çıkarılması hiçbir şey yapmaz. dolgu ve kenar boşluğu eklemek de hiçbir şey yapmaz

— Zach Galant

0

Bu sorunu yaşadım ve birkaç gönderiden gelen önerilerin hiçbiri işe yaramadı, hepsini denedim. Benim sorunum oluşturduğum tablonun özelliklerini devralarak başka bir tabloda iç içe olduğu ortaya çıktı. Kap tablosunu geçersiz kılmam gerekiyordu.

Bu örnekte, SuColTable tabloda sınıftır.

.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

Kenarlık-çöküşü, kenarlık: yok ve kenarlık aralığı tablo / satır / sütun satırından kurtulur. Dolgu 0 aramaları dolguyu kap tablosundan kaldırır. Konteyner tablo stillerini geçersiz kılmak için!

Ben padding_right kontrol diğer iki sınıf var çünkü padding_top, sol ve alt (sadece dolgu yerine) var.

line-height: 0px;

Satır yüksekliği sıfır satırı bir satır yüksek yapar. Birkaç satırınız varsa, bunlar tek bir satırda sıkıştırılır.

— George
kaynak

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

Snippet'i genişlet

— Ikeanyi kenechukwu
kaynak

OP'nin sorusunu sağlayan başka cevaplar da var ve bunlar bir süre önce yayınlandı. Bir yanıt gönderirken, lütfen özellikle eski soruları yanıtlarken yeni bir çözüm veya çok daha iyi bir açıklama eklediğinizden emin olun.

— help-info.de