테이블에서 두 행 사이의 공간?

CSS를 통해 가능합니까?

노력하고있어

tr.classname {
  border-spacing: 5em;
}

아무 소용이 없습니다. 어쩌면 내가 뭔가 잘못하고 있습니까?

td요소에 패딩을 사용해야 합니다. 이와 같은 것이 트릭을 수행해야합니다. 물론 하단 패딩 대신 상단 패딩을 사용하여 동일한 결과를 얻을 수 있습니다.

아래 CSS 코드에서보다 큼 기호는 패딩이 td하위 tr요소 인 클래스 에만 적용되는 요소 에만 적용됨을 의미합니다 spaceUnder. 이렇게하면 중첩 테이블을 사용할 수 있습니다. (예제 코드에서 C와 D는 셀입니다.) 직접 하위 선택기 (IE 6 생각)에 대한 브라우저 지원에 대해서는 확신이 없지만 최신 브라우저에서는 코드를 깨뜨리지 않아야합니다.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

이것은 다음과 같이 다소 렌더링되어야합니다.

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

부모 테이블에서 설정을 시도하십시오.

border-collapse:separate; 
border-spacing:5em;

테두리 선언을 추가하고 원하는 효과를 얻을 수 있는지 확인하십시오. 그러나 IE는 "분리 된 경계"모델을 지원하지 않습니다.

데이터가있는 id 앨범이있는 테이블이 있습니다 ... trs와 tds를 생략했습니다.

<table id="albums" cellspacing="0">       
</table>

CSS에서 :

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

테이블 뒤에 배경 이미지가 있기 때문에 흰색 패딩으로 가짜가 작동하지 않습니다. 각 내용 행 사이에 빈 행을 넣는 것을 선택했습니다.

<tr class="spacer"><td></td></tr>

그런 다음 CSS를 사용하여 스페이서 행에 특정 높이와 투명한 배경을 제공하십시오.

Mozilla 개발자 네트워크에서 :

경계 간격 CSS 속성은 인접한 셀의 경계 사이의 거리를 지정합니다 (분리 된 경계 모델에만 해당). 이는 프리젠 테이션 HTML의 cellspacing 속성과 동일 하지만 선택적인 두 번째 값을 사용하여 수평 및 수직 간격을 다르게 설정할 수 있습니다.

마지막 부분은 종종 감독됩니다. 예:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

최신 정보

이제 OP가 특정 별도 행이 간격을 늘리기를 원한다는 것을 이해합니다. tbody의미를 망치지 않고 그것을 달성하는 요소가 있는 설정을 추가했습니다 . 그러나 모든 브라우저에서 지원되는지 확실하지 않습니다. Chrome에서 만들었습니다.

아래 예제는 테이블이 별도의 행, 완전히 날아간 CSS 단맛으로 존재하는 것처럼 보이게하는 방법을 보여줍니다. 또한 tbody설정 과 함께 첫 번째 행에 더 많은 간격을 두었습니다. 자유롭게 사용하십시오!

지원 공지 : IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

구분자 행을 추가하려고 할 수 있습니다.

html :

<tr class="separator" />

CSS :

table tr.separator { height: 10px; }

테이블 셀의 여백을 변경할 수 없습니다. 그러나 패딩을 변경할 수 있습니다. TD의 패딩을 변경하면 셀이 더 커지고 패딩이 증가한 텍스트를 옆으로 밀어냅니다. 그러나 경계선이있는 경우 여전히 원하는 것이 아닙니다.

border-collapse : 개별 속성 (기본값)과 border-spacing 속성을 살펴보십시오 .

먼저 border-collapse 로 분리 해야 하며 border-spacing으로 열과 행 사이 의 간격을 정의 할 수 있습니다 .

이 CSS 속성은 실제로 모든 브라우저에서 잘 지원됩니다 ( 여기 참조) .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

좋아, 할 수있어

tr.classname td {background-color:red; border-bottom: 5em solid white}

배경색이 행이 아닌 td에 설정되어 있는지 확인하십시오. 이것은 대부분의 브라우저에서 작동합니다 ... (Chrome, 즉 & ff 테스트)

border-collapse: separate;테이블 에 설정해야 합니다. 대부분의 브라우저 기본 스타일 시트는에서 시작하여 border-collapse: collapse;테두리 간격을 줄입니다.

또한, 국경 간격은 다음에 간다 TD는 없습니다 TR.

시험:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

표에서 선 높이 를 사용할 수 있습니다 .

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

너무 늦게 대답 :)

tr요소에 float를 적용 하면 marginattribute를 사용 하여 두 행 사이에 간격을 둘 수 있습니다 .

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

행 사이 간격의 환영을 만들려면 배경색을 행에 적용한 다음 흰색으로 두꺼운 테두리를 만들어 "공간"을 만듭니다. :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

표에 간격을 두는 올바른 방법은 셀 패딩과 셀 간격을 사용하는 것입니다.

<table cellpadding="4">

비슷한 문제로 어려움을 겪고있는 동안 나는 이것을 우연히 발견했습니다. Varun Natraaj의 답변이 매우 유용하다는 것을 알았지 만 대신 투명한 테두리를 사용합니다.

td { border: 1em solid transparent; }

투명한 테두리에는 여전히 너비가 있습니다.

2015 년 최신 브라우저에서 작동합니다. 간단한 솔루션. 투명하게 작동하지는 않지만 Thoronwen의 답변과 달리 모든 크기로 투명하게 렌더링 할 수는 없습니다.

    tr {
      border-bottom:5em solid white;
    }

간단히 말해서 div공진 영역 td과의 다음과 같은 스타일을 설정합니다 div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

나는 이것이 오래된 스레드에 대한 답변이며 요청 된 솔루션이 아닐 수도 있지만 제안 된 모든 솔루션이 필요한 것을 수행하지는 않지만이 솔루션은 나를 위해 일했습니다.

하나는 배경색이 있고 다른 하나는 테두리 색이있는 2 개의 표 셀이 있습니다. 위의 솔루션은 경계를 제거하므로 오른쪽의 셀이 공중에 떠있는 것처럼 보입니다. 속임수를 썼는지 솔루션은 교체하는 것이 었습니다 table, tr그리고 tddiv의 및 해당 클래스와 표가 될 것이다 div id="table_replacer", 그럴 필요가있을 것입니다 div class="tr_replacer"및 TD는 것 div class="td_replacer"(변경 분명히 물론 된 div 태그를 닫는)

내 문제에 대한 해결책을 얻으려면 CSS는 다음과 같습니다.

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

이것이 누군가를 돕기를 바랍니다.

<td /> 요소를 <div /> 요소로 채우고 원하는 div에 여백을 적용 할 수 있습니다. 행 사이의 시각적 공간을 위해 <tr /> 요소에서 반복되는 배경 이미지를 사용할 수 있습니다. (이것은 내가 방금 사용한 솔루션이며 더 이상 테스트하지는 않았지만 IE6 및 FireFox 3에서 모두 작동하는 것으로 보입니다.)

또한 <td /> 내에 <div />를 넣도록 서버 코드를 수정하려는 경우 jQuery (또는 이와 유사한 것)를 사용하여 <td /> 내용을 <div / >, 원하는대로 CSS를 적용 할 수 있습니다.

또는 간격을 추가하려는 행 사이에 여백 높이가있는 공백을 추가하십시오.

다음은 몇 가지주의 사항이있는 간단하고 우아한 솔루션입니다.

• 실제로 간격을 투명하게 만들 수 없으므로 특정 색상을 지정해야합니다.
• 간격의 위와 아래에서 테두리 모서리를 둥글게 할 수 없습니다
• 테이블 셀의 패딩 및 테두리를 알아야합니다.

이를 염두에두고 다음을 시도하십시오.

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

실제로하고있는 것은 직사각형 ::before블록을 원하는 행의 모든 ​​셀 상단에 붙이고 앞에 간격을 둡니다. 이 블록은 기존 테두리와 겹치도록 셀에서 약간 튀어 나와서 숨 깁니다. 이 블록들은 상단과 하단 테두리가 함께 끼워져 있습니다. 상단 테두리는 간격을 형성하고 하단 테두리는 셀의 원래 상단 테두리 모양을 재현합니다.

셀뿐만 아니라 테이블 자체 주위에 테두리가있는 경우 '블록'의 가로 -ve 여백을 추가로 늘려야합니다. 따라서 4px 표 테두리의 경우 대신 다음을 사용하십시오.

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

그리고 테이블 border-collapse:separate대신을 사용 하는 경우 border-collapse:collapse(a) 전체 테이블 테두리 너비를 사용해야합니다.

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... 그리고 (b) 이제 간격 아래에 표시되어야하는 테두리의 이중 너비를 대체합니다.

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

이 기술은 원하는 경우 .gapafter 버전에 쉽게 적용되거나 행 간격 대신 수직 (열) 간격을 만들 수 있습니다.

다음은 실제로 볼 수있는 코드 펜입니다. https://codepen.io/anon/pen/agqPpW

여기서는 원활하게 작동합니다.

#myOwnTable td { padding: 6px 0 6px 0;}

필요한 경우 어떤 td를 지정하여보다 세밀한 레이아웃을 해결할 수 있다고 가정합니다.

위에 표시된 작업을 수행하면 ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

수직 열 정렬을 제거하므로 사용 방법에주의하십시오.

시도해 보셨습니까?

tr.classname { margin-bottom:5em; }

또는 각 td도 조정할 수 있습니다.

td.classname { margin-bottom:5em; }

또는

 td.classname { padding-bottom:5em; }