CSS : 테이블의 행 사이에 간격을 어떻게 생성합니까?

결과 테이블을 다음과 같이 보이게 만드는 것을 의미합니다.

[=== 행 ===]
[=== 행 ===]
[=== 행 ===]
[=== 행 ===]

... 그리고 더 비슷합니다 :

[=== 행 ===]

[=== 행 ===]

[=== 행 ===]

[=== 행 ===]

나는 추가를 시도했다

margin-bottom:1em;

td 와 tr 모두에게 있지만 아무것도 얻지 못했습니다. 어떤 아이디어?

당신이 필요로하는 모든:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

그것은 당신이 1em 수직 간격을 원하고 수평 간격이 없다고 가정합니다. 이 작업을 수행하는 경우 줄 높이 제어도 살펴 봐야합니다.

사람들이 제공 한 답변 중 일부가 국경 붕괴 : 붕괴와 관련되어 있다는 것은 다소 이상합니다. 그 효과는 질문이 요청한 것과 정반대입니다.

table {
    border-collapse: collapse;
}

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

먼저 border-collapse를 설정하지 않으면 셀이 반응하지 않습니다. 설정된 TR 요소에 테두리를 추가 할 수도 있습니다.

이것이 레이아웃의 경우 DIV 및 최신 레이아웃 기술을 사용하는 것으로 이동하지만 이것이 표 형식의 데이터라면 스스로를 두 드리십시오. 나는 여전히 데이터를 위해 웹 애플리케이션에서 테이블을 많이 사용합니다.

다른 답변 중 어느 것도 만족스럽지 않은 경우 언제든지 빈 행을 만들고 CSS로 적절하게 스타일을 지정하여 투명하게 만들 수 있습니다.

당신이 국경을, 또는 국경을 가지고 있으며 세포 내부의 간격을하지 않으려면, 당신은 사용할 수 있습니다 padding, 또는 line-height. 내가 아는 한 여백은 셀과 행에 영향을 미치지 않습니다.
셀 간격에 대한 CSS 속성은 다음과 같습니다.border-spacing 이지만 IE6 / 7에서는 작동하지 않습니다 (따라서 군중에 따라 사용할 수 있음).

다른 모든 방법이 실패하면 cellspacing마크 업에서 이전 속성을 사용할 수 있지만 이렇게하면 열 사이의 간격도 제공됩니다. 일부 CSS 재설정 은 브라우저 간 지원을 받으려면 어쨌든 설정해야한다고 제안합니다.

/ * cellspacing="0"마크 업에 테이블이 여전히 필요 합니다 * /

이것은 방법입니다 (불가능하다고 생각했습니다) :

먼저 테이블에 세로 테두리 간격 (예 : 5px) 만 지정하고 가로 테두리 간격을 0으로 설정합니다. 그런 다음 각 행 셀에 적절한 테두리를 지정해야합니다. 예를 들어 각 행의 맨 오른쪽 셀에는 위쪽, 아래쪽 및 오른쪽에 테두리가 있어야합니다. 맨 왼쪽 셀에는 위쪽, 아래쪽 및 왼쪽에 테두리가 있어야합니다. 그리고이 2 개 사이의 다른 셀은 위쪽과 아래쪽에만 테두리가 있어야합니다. 이 예와 같이 :

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

제 생각에는 가장 쉬운 방법은 태그에 패딩을 추가하는 것입니다.

td {
 padding: 10px 0
}

이것이 당신을 도울 것입니다! 격려!

간단히 사용할 수 있습니다 padding-top및 padding-bottomA의 td요소입니다.

단위 는이 목록에서 무엇이든 할 수 있습니다.

데모 코드 :

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

공간이 td와 동일한 배경색을 갖기를 원하면 TD의 패딩이 작동합니다.

제 경우에는 헤더 행과 그 위에있는 항목 사이의 공백이 필요했습니다.

이 스타일링을 단일 셀에 적용하여 원하는 분리를 얻을 수있었습니다. 모든 셀에 추가 할 필요는 없습니다 ... 틀림없이 가장 우아하지는 않지만 구분자 행보다 더 우아 할 수 있습니다.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

테이블을 사용하여 디자인을 고수하는 경우 가장 좋은 아이디어는 내용이없고 테이블의 각 행 사이에 지정된 높이가있는 빈 행을 제공하는 것입니다.

div를 사용하여 이러한 복잡성을 피할 수 있습니다. 각 div에 여백을 제공하십시오.

CSS를 사용하여 각 행의 높이를 수정할 수도 있습니다.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

<td>요소 의 높이를 수정할 수도 있으며 동일한 결과를 제공합니다.

<tr>바로 아래에 다른 하나를 만들고 내용에 약간의 공간이나 높이를 추가하십시오.<td>

예를 들어 바이올린을 확인하십시오.

https://jsfiddle.net/jd_dev777/wx63norf/9/

tr에 다음 규칙을 추가하면 작동합니다.

float: left

샘플 (IE9 오프 코스에서 열기 :)) : http://jsfiddle.net/zshmN/

편집 : 이것은 많은 사람들이 지적한 합법적이거나 올바른 해결책이 아니지만 옵션이없고 필요한 것이 있으면 IE9에서 작동합니다.

따라서 투표를 거부하는 모든 분들께 올바른 해결책도 알려주십시오.