테이블에서 두 행 사이의 공간? 가능합니까? 노력하고있어 tr.classname { border-spacing:

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의 패딩을 변경하면 셀이 더 커지고 패딩이 증가한 텍스트를 옆으로 밀어냅니다. 그러나 경계선이있는 경우 여전히 원하는 것이 아닙니다.