thead와 tbody 사이의 간격

thead와 tbody 사이의 간격

---

다음과 같은 간단한 html 테이블이 있습니다.

<table>
  <thead>
    <tr><th>Column 1</th><th>Column 2</th></tr>
  </thead>
  <tbody>
    <tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
    <tr class="even"><td>Value 3</td><td>Value 4</td></tr>
    <tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
    <tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
  </tbody>
</table>

다음과 같이 스타일을 지정하고 싶습니다.

• 상자 그림자가있는 머리글 행
• 헤더 행과 첫 번째 본문 행 사이의 공백

나는 다른 것을 시도했다 :

table {
    /* collapsed, because the bottom shadow on thead tr is hidden otherwise */
    border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr   { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th         { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

/* I would like spacing between thead tr and tr.first-row */

tr.first-row {
    /* This doesn't work because of border-collapse */
    /*border-top: 2em solid white;*/
}

tr.first-row td {
    /* This doesn't work because of border-collapse */
    /*border-top: 2em solid white;*/
    /* This doesn't work because of the td background-color */
    /*padding-top: 2em;*/
    /* Margin is not a valid property on table cells */
    /*margin-top: 2em;*/
}

참조 : http://labcss.net/#8AVUF

누구든지 내가 이것을 어떻게 할 수 있는지에 대한 조언이 있습니까? 아니면 동일한 시각적 효과 (예 : 몸매 그림자 + ​​간격)를 얻습니까?

---

나는이 바이올린에 그것을 가지고 있다고 생각 하고 당신의 것을 업데이트했습니다 .

tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
}

더 쉽고 간단하게 편집 :

tbody:before {
    content:"@";
    display:block;
    line-height:10px;
    text-indent:-99999px;
}

이렇게하면 텍스트가 실제로 보이지 않습니다.

---

또한 Zero-Width Non-Joiner를 사용하여 sinsedrix CSS 를 최소화 할 수 있습니다 .

tbody:before {line-height:1em; content:"\200C"; display:block;}

---

이렇게하면 헤더와 테이블 내용 사이에 약간의 공백이 생깁니다.

thead tr {
  border-bottom: 10px solid white;
}

테두리 색상을 설정하는 것은 약간의 치트 방법이지만 잘 작동합니다.

Form investigation, you can't set box-shadow to a table row, but you can to table cells:

th {
  box-shadow: 5px 5px 5px 0px #000000 ;
}

(I'm not sure how you want the shadow to look like, so just adjust the above.)

---

So box-shadow doesn't work well on the tr element... but it does work on a pseudo content element; sinsedrix put me on the right track and this is what I ended up with:

table {
    position: relative;
}

td,th {padding: .5em 1em;}

tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

thead th:first-child:before {
    content: "-";

    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;

    box-shadow: 0 1px 10px #000000;
    padding: .75em 0;

    background-color: #ccc;
    color: #ccc;
}

thead th {
    padding-bottom: 2em;
}

---

This worked for me on Chrome (for other browsers I don't know).

.theTargethead::after
{
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
}

Such css code creates an empty white space between the thead and the tbody of the table. If I set the background to transparent, the first column of the above tr > th elements shows its own color (green in my case) making about the first 1 cm of the ::after element green too.

또한 content : "-";빈 문자열 ""대신 행에 "-"기호를 사용하면 인쇄 된 페이지를 파일 (예 : pdf)로 내보낼 때 문제가 발생할 수 있습니다. 물론 이것은 파서 / 내보내기에 따라 다릅니다. pdf 편집기 (예 : Ms word, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro)로 연 이러한 내 보낸 파일에는 여전히 빼기 기호가 포함될 수 있습니다. 빈 문자열에는 동일한 문제가 없습니다. 인쇄 된 html 테이블을 이미지로 내 보내면 두 경우 모두 문제가 없습니다. 아무것도 렌더링되지 않습니다.

나는 사용해도 아무런 문제가 없음

content : "\200C";

---

이것은 트릭을 수행해야합니다.

table {
  position: relative;
}
thead th { 
  // your box shadow here
}
tbody td {
  position: relative;
  top: 2rem; // or whatever space you want between the thead th and tbody td
}

그리고 이것은 대부분의 브라우저에서 잘 작동합니다.

참고 URL : https://stackoverflow.com/questions/9258754/spacing-between-thead-and-tbody