Jak usunąć niechcianą przestrzeń między wierszami i kolumnami w tabeli?

178

Jak usunąć dodatkową przestrzeń między wierszami i kolumnami w tabeli.

Próbowałem zmienić margines, dopełnienie i różne właściwości obramowania tabeli oraz tr i td.

Chcę, aby wszystkie zdjęcia znajdowały się obok siebie i wyglądały jak jeden duży obraz.

Jak mam to naprawić?

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
źródło

85

Dodaj ten reset CSS do swojego kodu CSS: ( stąd )

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

Skutecznie zresetuje CSS, pozbywając się dopełnienia i marginesów.

— vectran
źródło

15

Jest komentarz, jeśli czytasz: / * tabele nadal wymagają 'cellspacing = "0"' w znacznikach * /

— easwee

2

co się stanie, jeśli używasz dużo CSS na swojej stronie i nie chcesz go resetować?

— Sevenearths

Prawdopodobnie najlepszą praktyką jest użycie resetu lub jakiegoś frameworka i zbudowanie z tego miejsca. Jednak w tym przypadku będziesz musiał zresetować każdy styl, tj. table {padding: 0px; border: 0px; border-collapse: collapse; etc} .... Sprawdź quirksmode.org/css/tables.html, aby uzyskać więcej.

— vectran

Możesz pominąć wiele z nich, ponieważ dotyczy to tylko stołów.

— Cai Haoyang

31

To jest przesada, nie odpowiada na pytanie i nie jest nawet pełnym resetem. Być może wyodrębnij odpowiedni kod, wyjaśnij to, a następnie zasugeruj użycie resetowania.

— Sandy Gifford

198

Dodanie do odpowiedzi vectran: Musisz również ustawić cellspacingatrybut w elemencie tabeli, aby zapewnić kompatybilność z różnymi przeglądarkami.

<table cellspacing="0">

EDYTUJ (dla porządku uzupełniam to 5 lat później :):

Internet Explorer 6 i Internet Explorer 7 wymagały bezpośredniego ustawienia odstępów między komórkami jako atrybutu tabeli, w przeciwnym razie odstępy nie znikną.

Internet Explorer 8 i nowsze wersje oraz wszystkie inne wersje popularnych przeglądarek - Chrome, Firefox, Opera 4+ - obsługują odstępy między krawędziami właściwości CSS .

Aby więc zresetować odstępy między komórkami tabeli w różnych przeglądarkach (obsługując IE6 jako przeglądarkę dinozaurów), możesz wykonać poniższy przykład kodu:

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>

Rozwiń fragment

— łatwe
źródło

68

To zadziałało dla mnie:

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

— pagetribe
źródło

55

W przypadku obrazów w td użyj tego dla obrazów:

display: block;

To usuwa dla mnie niechcianą przestrzeń

— Jacob Bertelsen
źródło

9

Wystarczy dodać na górze odpowiedź Jakuba, dla imgw td,

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

Działa to w przypadku większości klientów poczty e-mail, w tym Gmaila. Ale nie Outlook. W przypadku programu Outlook musisz wykonać jeszcze dwa kroki:

table {border-collapse: collapse;}

i ustawić co tdelementy mają takie same heighti widthjako jego zawartych obrazów. Na przykład,

<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
źródło

8

table 
{
    border-collapse: collapse;
}

zwinie wszystkie obramowania oddzielające kolumny tabeli ...

lub spróbuj

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

wykonaj wszystkie odstępy między komórkami na 0 i odstępy między granicami 0, aby osiągnąć to samo.

baw się dobrze!

— Aamir Shahzad
źródło

1

<table cellspacing="0" border-spacing: 0;>jest nieprawidłowym znacznikiem! <table cellspacing="0" style="border-spacing: 0;">byłoby poprawne

— Dirk von Grünigen

8

Aby uzyskać zgodność ze standardami HTML5, dodaj cały ten plik CSS, aby usunąć całą przestrzeń między obrazami w tabelach:

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

— totalnie niesamowity
źródło

5

Spróbuj tego,

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

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

— Rakesh Vadnal
źródło

4

ustawienie Cellpadding i CellSpacing na 0 usunie niepotrzebną przestrzeń między wierszami i kolumnami ...

— Vijay
źródło

4

Musiałem tylko dodać:

line-height: 0px;

w moim

<tr ...>

— Ángel Ramírez Isea
źródło

Istnieją inne odpowiedzi, które zawierają pytanie OP i zostały opublikowane jakiś czas temu. Pisząc odpowiedź, upewnij się, że dodałeś nowe rozwiązanie lub znacznie lepsze wyjaśnienie, szczególnie w przypadku odpowiedzi na starsze pytania.

— help-info.de

1

dodanie tej linii na początek pliku s zadziałało:

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

modyfikowanie css w celu ustawienia odpowiednich właściwości obramowania nie działało, dopóki nie dodałem powyższej linii

— Albert s
źródło

To JEDYNA rzecz, która działała dla mnie! +1 i DZIĘKUJEMY! Ustawiłem go na Ścisły zamiast przejściowy.

— Scott Biggs

0

Czy próbowałeś usunąć TR, które mają colspan i zobaczyć, czy to coś zmienia?

Doświadczyłem, że colspans i rowspans są dość nieprzyjemne, jeśli chodzi o dokładne projektowanie tabel. Jeśli twoje obrazy wyglądają dobrze bez colspan-TR, zacznę od tego i zbuduję zagnieżdżony zestaw tabel.

Również twój style.css nie wydaje się być kompletny, może coś jest nie tak? Dodałbym przynajmniej padding: 0; margin: 0;do tabeli (lub do klasy „mytable”). Upewnij się, że Twoje obrazy również nie mają spacji i / lub ramek (np. Dodając je img { border: 0; }do arkusza stylów).

— Select0r
źródło

usunięcie TR za pomocą colspana nic nie daje. dodanie dopełnienia i marginesu też nic nie robi

— Zach Galant,

0

Miałem ten problem i żadna z sugestii z kilku postów nie działała, wypróbowałem je wszystkie. Mój problem okazał się, że tworzona przeze mnie tabela jest zagnieżdżona w innej tabeli, dziedzicząc po swoich właściwościach. Musiałem zastąpić tabelę kontenerów.

W tym przykładzie SuColTable jest klasą w tabeli.

.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

Funkcje border-collapse, border: none i border-spacing pozwalają pozbyć się linii tabeli / wiersza / kolumny. Wywołania dopełnienia 0 usuwają wypełnienie z tabeli kontenera. Musiałem uwzględnić! Ważne w każdym stylu, aby to działało, aby nadpisać style tabeli kontenerów.

Mam padding_top, left i bottom (zamiast tylko padding), ponieważ mam dwie inne klasy, które kontrolują padding_right.

line-height: 0px;

Wysokość wiersza zero sprawia, że wiersz jest wysoki o jedną linię. Jeśli masz kilka linii, są one skompresowane w jedną linię.

— Jerzy
źródło

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

Rozwiń fragment

— Ikeanyi kenechukwu
źródło

Istnieją inne odpowiedzi, które zawierają pytanie OP i zostały opublikowane jakiś czas temu. Pisząc odpowiedź, upewnij się, że dodałeś nowe rozwiązanie lub znacznie lepsze wyjaśnienie, szczególnie w przypadku odpowiedzi na starsze pytania.

— help-info.de