테이블 행 채우기
<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가 어떻게 영향을받지 않는지 확인하십시오. 해결책은 무엇입니까?
트릭은 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;
}
In CSS 1 and CSS 2 specifications, padding was available for all elements including <tr>. Yet support of padding for table-row (<tr>) has been removed in CSS 2.1 and CSS 3 specifications. I have never found the reason behind this annoying change which also affect margin property and a few other table elements (header, footer, and columns).
Update: in Feb 2015, this thread on the www-style@w3c.org mailing list discussed about adding support of padding and border for table-row. This would apply the standard box model also to table-row and table-column elements. It would permit such examples. The thread seems to suggest that table-row padding support never existed in CSS standards because it would have complicated layout engines. In the 30 September 2014 Editor's Draft of CSS basic box model, padding and border properties exist for all elements including table-row and table-column elements. If it eventually becomes a W3C recommendation, your html+css example may work as intended in browsers at last.
give the td padding
Option 1
You could also solve it by adding a transparent border to the row (tr), like this
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;
}
이것은 매우 오래된 게시물이지만 최근에 직면 한 비슷한 문제에 대한 해결책을 게시해야한다고 생각했습니다.
답변 : 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.이 스타일을 테이블에 간단히 추가 할 수 있습니다.
table {
border-spacing: 15px;
}
참고 URL : https://stackoverflow.com/questions/3656615/padding-a-table-row
'programing' 카테고리의 다른 글
| .net에서 IEnumerable은 무엇입니까 (0) | 2020.11.11 |
|---|---|
| 자바 : 제한된 와일드 카드 또는 제한된 유형 매개 변수? (0) | 2020.11.11 |
| $ (window) .load와 $ (document) .ready의 차이점은 무엇입니까? (0) | 2020.11.11 |
| 부호있는 정수와 부호없는 정수의 차이점은 무엇입니까? (0) | 2020.11.11 |
| 우선 순위 반전이란 무엇입니까? (0) | 2020.11.10 |