테이블 행에 여백을 추가하는 방법

테이블 행에 여백을 추가하는 방법 [중복]

---

이 질문에는 이미 답변이 있습니다.

• CSS : 테이블의 행 사이에 간격을 어떻게 만드나요? 답변 11 개
• 테이블에서 두 행 사이의 공간? 답변 25 개

많은 행을 포함하는 테이블이 있습니다. 이러한 행 중 일부는 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>

---

테이블 행은 여백 값을 가질 수 없습니다. 패딩을 늘릴 수 있습니까? 작동합니다. 그렇지 않으면 행 <tr class="spacer"></tr>앞뒤에 삽입 할 수 있습니다 class="highlighted".

---

border-spacing이 특정 경우에 해당 숙박 시설이 작동합니다.

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

참조 .

---

<tr>s 자체를 스타일링 할 수는 없지만 <td>s를 "highlight" <tr>sa 스타일 내부에 제공 할 수 있습니다.

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

---

행 높이는 가능한 솔루션이 될 수 있습니다

tr
{
    line-height:30px;
}

---

나는 이것이 오래된 종류라는 것을 알고 있지만, 같은 라인을 따라 작동하는 것을 얻었습니다. 당신은 이것을 할 수 없었습니까?

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

도움이 되었기를 바랍니다.

---

우선, 현대 렌더링에서는 작동하지 않으므로 a <tr>또는 a에 여백을 두려고 시도하지 마십시오 <td>.

• 해결책 1

여백은 작동하지 않지만 패딩 은 작동합니다.

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

Warning : This will also push the border further away from the element, if your border is visible, you might want to use solution 2 instead.

• Solution 2

To keep the border close to the element and mimic the margin, put another <tr> between each of your reel table's <tr> like so :

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

---

This isn't going to be exactly perfect though I was happy to discover that you can control the horizontal and vertical border-spacing separately:

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

---

Because margin is ignored on tr, I usually use a workaround, by setting a transparent border-bottom or border-top and setting the background-clip property to padding-box so the background-color does not get painted underneath the border.

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

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

1. Makes sure cells share a common border, but is completely optional. The solution works without it.
2. The 5px value represents the margin that you want to achieve
3. Sets the background-color of your row/cell
4. Makes sure the background get not painted underneath the border

see a demo here: http://codepen.io/meodai/pen/MJMVNR?editors=1100

background-clip is supported in all modern browser. (And IE9+)

Alternatively you could use a border-spacing. But this will not work with border-collapse set to collapse.

---

A way to mimic the margin on the row would be to use the pseudo selector to add some spacing on the td.

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

This way anything marked with the highlight class will be separated top and bottom.

https://jsfiddle.net/d0zmsrfs/

---

You might try to use CSS transforms for indenting a whole tr:

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

I think this is a valid solution. Seems to work fine in Firefox 16, Chrome 23 and Safari 6 on my OSX.

---

A hack to give the appearance of margins between table rows is to give them a border the same color as the background. This is useful when styling a 3rd party theme where you can't change the html markup. Eg:

tr{ 
    border: 5px solid white;
}

---

Here's a neat way I did it:

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

That will add 4px of vertical spacing between each row. And if you wanted to not get that border on the last child:

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

Reminder that CSS3 pseudo-selectors will only work in IE 8 and below with selectivizr.

---

I gave up and inserted a simple jQuery code as below. This will add a tr after every tr, if you have so many trs like me. Demo: 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>

---

add a div to the cells that you would like to add some extra spacing:

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

---

You can create space between table rows by adding an empty row of cells like this...

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

CSS can then be used to target the empty cells like this…

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

NB: This technique is only good if none of your normal cells will be empty/vacant.

Even a non-breaking space will do to avoid a cell from being targetted by the CSS rule above.

Needless to mention that you can adjust the space's height to whatever you like with the height property included.

---

add this style before the class="highlighted" padding-bottom and display is inline-table

---

Another possibility is to use a pseudo selector :after or :before

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

That might avoid issues with browser that don't understand the pseudo selectors, plus background-colors are not an issue.

The downside is however, that it adds some extra whitespace after the last cell.

---

For what is worth, I took advantage that I was already using bootstrap (4.3), because I needed to add margin, box-shadow and border-radius to my row, something I can't do with tables.

<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>

On css I added a few lines to mantain the table behavior of bootstrap

@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