테이블에서 행과 열 사이의 원하지 않는 공간을 제거하는 방법은 무엇입니까?

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 
— 잭 갈란트
소스

답변:

85

이 CSS 재설정을 CSS 코드에 추가하십시오. ( 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;
}

패딩과 여백을 제거하여 CSS를 효과적으로 재설정합니다.

— 벡 트란
소스
15
/ * 테이블에는 마크 업에서 여전히 'cellspacing = "0"'이 필요합니다. * /
— easwee
2
페이지에서 많은 CSS를 사용하고 있으며 재설정하지 않으려는 경우 어떻게됩니까?
— Sevenearths
재설정 또는 일종의 프레임 워크를 사용하여 빌드하는 것이 가장 좋습니다. 그러나이 경우 각 스타일을 다시 설정해야합니다. 표 {패딩 : 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>
스 니펫 확장

— 이스 위
소스
68

이것은 나를 위해 일했다 :

#table {
  border-collapse: collapse;
  border-spacing: 0;
}
— 페이지 부족
소스
55

td의 이미지의 경우 이미지에 사용하십시오.

display: block;

그것은 나를 위해 원치 않는 공간을 제거합니다

— 제이콥 베르 텔슨
소스
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>
— 헥신 피터
소스
8 
table 
{
    border-collapse: collapse;
}

테이블 열을 구분하는 모든 테두리가 축소됩니다 ...

또는 시도

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

모든 할 셀 간격을 동일 달성하기 위해 0 간격 0과 국경.

재미있게 보내세요!

— 아마 미르 샤 자드
소스
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;
}
— 완전히 놀랍게도
소스
5

이 시도,

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

table td, 
table th{
padding: 0; /* 'cellpadding' equivalent */
}
— 라 케시 바드 날
소스
4

Cellpadding과 cellspacing을 0으로 설정하면 행과 열 사이의 불필요한 공간이 제거됩니다 ...

— 비제이
소스
4

내가해야 할 일은 추가했습니다.

line-height: 0px;

내

<tr ...>
— 앙헬 라미레즈 아이시
소스
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

colspan이있는 TR을 제거하려고 시도하여 변경 사항이 있는지 확인 했습니까?

colspans와 rowspans는 정확한 테이블 디자인에 관해서는 매우 불쾌한 경험이 있습니다. colspan-TR이 없어도 이미지가 잘 보이면 시작하여 중첩 된 테이블 세트를 만듭니다.

또한 style.css가 완전하지 않은 것 같습니다. 아마도 잘못된 것이 있습니까? 나는 적어도 padding: 0; margin: 0;테이블이나 클래스 "mytable"에 추가하고 싶다 . 이미지에 공백 및 / 또는 테두리가 없는지 확인하십시오 (예 : img { border: 0; }스타일 시트 에 추가 ).

— 선택 0r
소스
colspan으로 TR을 제거해도 아무런 효과가 없습니다. 패딩을 추가하고 마진 역시 아무것도하지 않는다
— 자크 런트
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

border-collapse, border : none 및 border-spacing은 테이블 / 행 / 열 줄을 제거합니다. 패딩 0 호출은 컨테이너 테이블에서 패딩을 제거합니다. 컨테이너 테이블 스타일을 재정의하기 위해 모든 스타일에! important를 포함시켜야했습니다.

padding_right를 제어하는 ​​두 개의 다른 클래스가 있기 때문에 padding_top, 왼쪽 및 아래쪽 (패딩만이 아닌)이 있습니다.

line-height: 0px;

줄 높이 0은 행을 한 줄 높이로 만듭니다. 여러 줄이 있으면 한 줄로 압축됩니다.

— 성 조지
소스
-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>
스 니펫 확장

— 이케 아니 케네 추크
소스
OP의 질문을 제공하는 다른 답변이 있으며 얼마 전에 게시되었습니다. 답변을 게시 할 때는 특히 오래된 질문에 답변 할 때 새로운 솔루션을 추가하거나 실질적으로 더 나은 설명을 추가해야합니다.
— help-info.de
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.