테이블 행 채우기

Question 1

<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

패딩은 다음과 같습니다. 내부의 td가 어떻게 영향을받지 않는지 확인하십시오. 해결책은 무엇입니까? 테이블 행 채우기 문제

Question 2

요령은 td요소에 패딩을 제공 하지만 첫 번째 요소에는 예외를 만드는 것입니다 (예, 해키이지만 때로는 브라우저의 규칙에 따라 플레이해야합니다).

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

First-child는 비교적 잘 지원됩니다 : https://developer.mozilla.org/en-US/docs/CSS/:first-child

을 사용하여 수평 패딩에 대해 동일한 추론을 사용할 수 있습니다 tr:first-child td.

대안 적으로 사용하여 첫 번째 열을 제외 연산자 . 하지만 현재로서는 이에 대한 지원이 좋지 않습니다. not

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}

Question 3

에 CSS 1 및 CSS 2 사양, 패딩을 포함한 모든 요소에 사용할 수 있었다 <tr>. 그러나 테이블 행 ( <tr>)에 대한 패딩 지원은 CSS 2.1 및 CSS 3 사양 에서 제거되었습니다 . 여백 속성과 몇 가지 다른 테이블 요소 (머리글, 바닥 글 및 열)에도 영향을 미치는이 성가신 변경의 원인을 찾지 못했습니다.

업데이트 : 년 2 월 2015 년, 이 스레드 온 www-style@w3c.org메일 링리스트는 테이블 행에 대해 패딩 및 테두리의 지원을 추가하는 방법에 대해 논의했다. 이것은 표준 상자 모델을 테이블 행 및 테이블 열 요소에도 적용합니다. 그것은 그러한 예를 허용 할 것 입니다. 스레드는 복잡한 레이아웃 엔진이 있기 때문에 CSS 표준에 테이블 행 패딩 지원이 존재하지 않았 음을 제안하는 것 같습니다. 2014 년 9 월 30 일 Editor 's Draft of CSS basic box model, padding and border properties are exist for all elements including table-row and table-column elements. 결국 W3C 권장 사항이되면 html + css 예제가 마침내 브라우저에서 의도 한대로 작동 할 수 있습니다.

Question 4

td 패딩 제공

Question 5

옵션 1

다음과 같이 행 (tr)에 투명한 테두리를 추가하여 해결할 수도 있습니다.

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

규칙적인 테두리가 필요한 경우이 방법은 슬프게도 작동하지 않지만 매력처럼 작동합니다.

옵션 2

행은 셀을 그룹화하는 방법으로 작동하므로이를 수행하는 올바른 방법은 다음을 사용하는 것입니다.

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}

Question 6

이것은 매우 오래된 게시물이지만 최근에 직면 한 비슷한 문제에 대한 해결책을 게시해야한다고 생각했습니다.

답변 : tr 요소를 블록 요소 로 표시하여이 문제를 해결했습니다. 즉 , tr 요소에 대해 display : block 의 CSS를 지정합니다 . 아래 코드 샘플에서이를 확인할 수 있습니다.

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <h2>Lorem Ipsum</h2>
        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
          eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
          luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
        </p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.

스 니펫 확장

Question 7

이 스타일을 테이블에 간단히 추가 할 수 있습니다.

table {
    border-spacing: 15px;
}