표 행에 여백을 추가하는 방법

표 행에 여백을 추가하는 방법

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS: 표의 행 사이에 간격을 어떻게 만들 수 있습니까? (12개 답변)

표에서 두 행 사이의 공백? (30개 답변)

마감됨4년 전에.

저는 많은 줄이 있는 테이블을 가지고 있습니다. 중 는 행이중일입니다.class="highlight"다르게 스타일을 지정하고 강조 표시해야 하는 행을 나타냅니다.이 행 앞과 뒤에 공백을 추가하여 다른 행과 약간 떨어져 보이도록 합니다.

이 일을 끝낼 수 있을 거라 생각했어요margin-top:10px;margin-bottom:10px;하지만 작동하지 않습니다.이 일을 어떻게 해야 할지, 할 수 있을지 아는 사람?여기 HTML이 있고 tbody의 두 번째 tr을 클래스 하이라이트로 설정했습니다.

<table>
<thead>
  <tr>
     <th>Header 1</th>
     <th>Header 2</th>
  </tr>
</thead>
<tbody>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr class="highlight">
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
</tbody>
</table>

그border-spacing자산은 이 특정한 경우에 작동합니다.

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

참조.

테이블 행에는 여백 값을 사용할 수 없습니다.패딩을 늘려주실 수 있나요?그것은 통할 것이다.그렇지 않으면 다음을 삽입할 수 있습니다.<tr class="spacer"></tr>에의 에.class="highlighted" 행, 행, 행

스타일을 지정할 수 없습니다.<tr>그들 스스로, 하지만 당신은 그것을 줄 수 있습니다.<td>의 "부내" s.<tr>

tr.highlight td {
  padding-top: 10px; 
  padding-bottom:10px
}

수평 및 수직 경계 간격을 개별적으로 제어할 수 있다는 사실을 알게 되어 기뻤지만, 정확하게 완벽하지는 않을 것입니다.

table
{
 border-collapse: separate;
 border-spacing: 0 8px;
}

선 높이가 가능한 해결책이 될 수 있습니다.

tr
{
    line-height:30px;
}

이게 좀 오래된 일인 건 알지만, 저도 같은 일을 하고 있어요.이거 할 수 없어요?

tr.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}

이게 도움이 되길 바랍니다.

우선, 여을두하마세요지고에 을 두려고 하지 <tr> 는또.<td>현대적인 렌더링에서는 작동하지 않기 때문입니다.

• 솔루션 1

마진은 효과가 없지만 패딩은 효과가 있습니다.

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

경고: 테두리가 요소에서 더 멀리 이동합니다. 테두리가 표시된 경우 솔루션 2를 대신 사용할 수 있습니다.

• 솔루션 2

테두리를 요소에 가깝게 유지하고 여백을 모방하려면 다른 요소를 추가합니다.<tr>당신의 릴 테이블의 각각의 사이.<tr> 와같이이::

<tr style="height: 20px;"> <!-- Mimic the margin -->
</tr>

행의 여백을 모방하는 방법은 유사 선택기를 사용하여 공간을 추가하는 것입니다.td.

.highlight td::before, .highlight td::after
{
  content:"";
  height:10px;
  display:block;
}

이렇게 하면 강조 클래스로 표시된 모든 항목이 위와 아래로 분리됩니다.

https://jsfiddle.net/d0zmsrfs/

ㅠㅠmargin에서 됩니다.tr일반적으로 투명하게 설정하여 해결 방법을 사용합니다.border-bottom또는border-top 및 정및설background-clip의 padding-box 그 래서그서background-color테두리 아래에 그림이 그려지지 않습니다.

table {
   border-collapse: collapse; /* [1] */
}

th, td {
  border-bottom: 5px solid transparent; /* [2] */
  background-color: gold; /* [3] */
  background-clip: padding-box; /* [4] */
}

1. 셀이 공통 테두리를 공유하지만 완전히 선택적입니다.솔루션은 그것 없이 작동합니다.
2. 그5px하고자 하는 을 나타냅니다.
3. 설정합니다.background-color의 행
4. 합니다.background그림 밑에 그려지지 않음border

데모 보기: http://codepen.io/meodai/pen/MJMVNR?editors=1100

background-clip모든 최신 브라우저에서 지원됩니다. (IE9+)

는▁a다있▁use를 사용할 수도 있습니다.border-spacing하지만 이것은 작동하지 않을 것입니다.border-collapse로 설정한.collapse.

전체 tr을 들여쓰기 위해 CSS 변환을 사용할 수 있습니다.

tr.indent {
   -webkit-transform: translate(20px,0);
   -moz-transform: translate(20px,0);
}

저는 이것이 유효한 해결책이라고 생각합니다.내 OSX의 Firefox 16, Chrome 23 및 Safari 6에서 잘 작동하는 것 같습니다.

제가 한 멋진 방법은 다음과 같습니다.

table tr {
    border-bottom: 4px solid;
}

그것은 추가될 것입니다.4px각 행 사이의 수직 간격을 나타냅니다.그리고 마지막 아이의 경계선을 넘기지 않으려면,

table tr:last-child {
    border-bottom: 0;
}

CSS3 유사 선택기는 selectivizr과 함께 IE 8 이하에서만 작동한다는 점을 상기시킵니다.

저는 포기하고 아래와 같은 간단한 jQuery 코드를 삽입했습니다.만약 당신이 나처럼 많은 tr을 가지고 있다면, 이것은 모든 tr 뒤에 tr을 추가할 것입니다.데모: https://jsfiddle.net/acf9sph6/

<table>
  <tbody>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
  </tbody>
</table>
<script>
$(function () {
       $("tr.my-tr").after('<tr class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
    height: 20px;
}
</style>

테이블 행 사이의 여백 모양을 제공하는 해킹은 배경과 동일한 색상의 테두리를 제공하는 것입니다.이것은 HTML 마크업을 변경할 수 없는 타사 테마를 스타일링할 때 유용합니다.예:

tr{ 
    border: 5px solid white;
}

추가 간격을 추가할 셀에 div를 추가합니다.

<tr class="highlight">
 <td><div>Value1</div></td>
 <td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}

다음과 같이 빈 셀 행을 추가하여 테이블 행 사이에 공백을 만들 수 있습니다.

<tr><td></td><td></td></tr>

CSS는 이렇게 빈 셀을 대상으로 사용할 수 있습니다.

table :empty{border:none; height:10px;}

NB: 이 기술은 일반 셀이 비어 있거나 비어 있지 않은 경우에만 유용합니다.

셀이 위의 CSS 규칙의 대상이 되는 것을 방지하기 위해서는 깨지지 않는 공간도 좋습니다.

높이 속성을 포함하여 공간의 높이를 원하는 대로 조정할 수 있음은 말할 필요도 없습니다.

또 다른 가능성은 유사 선택기 :after 또는 :before를 사용하는 것입니다.

tr.highlight td:last-child:after
{
  content: "\0a0";
  line-height: 3em;
}

그러면 유사 선택기를 이해하지 못하는 브라우저 문제를 피할 수 있고 배경색도 문제가 되지 않습니다.

그러나 마지막 셀 뒤에 공백이 추가된다는 단점이 있습니다.

저는 제 행에 여백, 상자 그림자 및 테두리 반지름을 추가해야 했기 때문에 이미 부트스트랩(4.3)을 사용하고 있다는 점을 이용했습니다. 테이블로는 할 수 없습니다.

<div id="loop" class="table-responsive px-4">
<section>
    <div id="thead" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div id="tbody" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</section>
</div>

CSS에서 부트스트랩의 테이블 동작을 유지하기 위해 몇 줄을 추가했습니다.

@media (max-width: 800px){
    #loop{
        section{
            min-width: 700px;
        }
    }
}

클래스="패딩" 패딩-하단 앞에 이 스타일을 추가하고 디스플레이는 인라인 테이블입니다.

언급URL : https://stackoverflow.com/questions/10690299/how-to-add-a-margin-to-a-table-row-tr