CSS로 원하지 않는 표 셀 테두리 제거
특이하고 실망스러운 문제가 있습니다. 간단한 마크 업의 경우 :
<table>
<thead>
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
thead , tr 및 tr 홀수 요소에 다른 배경색 값을 적용 합니다. 문제는 대부분의 브라우저에서 모든 셀에 테이블 행의 색상이 아닌 원하지 않는 테두리가 있다는 것입니다. Firefox 3.5에서만 표의 셀에 테두리가 없습니다.
다른 주요 브라우저에서 이러한 테두리를 제거하는 방법을 알고 싶습니다. 그래야 표에서 볼 수있는 유일한 것은 행 색상이 번갈아 나타나는 것입니다.
이것을 CSS에 추가해야합니다.
table { border-collapse:collapse }
다음과 같이 HTML을 수정하십시오.
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr><td>1</td><td>2</td><td>3</td></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
(추가했습니다 border="0" cellpadding="0" cellspacing="0"
)
CSS에서 다음을 수행 할 수 있습니다.
table {
border-collapse: collapse;
}
몇 가지 CSS를 추가하십시오.
td, th {
border:none;
}
cellspacing
테이블 의 속성을로 설정합니다 0
.
CSS 스타일을 사용할 수도 border-spacing: 0
있지만 이전 버전의 IE를 지원할 필요가없는 경우에만 가능합니다.
테두리를 제거하려면 다음과 같이 CSS를 사용하십시오.
td {
border-style : hidden!important;
}
추가 할 수도 있습니다.
table td { border:0; }
위는 cellpadding = "0"설정과 동일합니다.
기본 브라우저 스타일을 재설정하는 데 사용되는 doctype 및 / 또는 CSS에 의존 할 수있는 브라우저에 의해 셀에 자동으로 추가 된 패딩을 제거합니다.
위의 제안을 시도한 후 저에게 효과가 있었던 유일한 방법은 자식 테마 style.css의 다음 섹션에서 테두리 속성을 "0"으로 변경하는 것입니다 (각 항목을 찾으려면 "찾기"작업을 수행하십시오. 다음은 다음과 같습니다. 짧은 발췌):
.comment-content table {
border-bottom: 1px solid #ddd;
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}
따라서 나중에 다음과 같이 보입니다.
.comment-content table {
border-bottom: 0;
.comment-content td {
border-top: 0;
padding: 6px 10px 6px 0;
}
의 스타일을 border: 0px; border-collapse: collapse;
테이블 요소에 지정해보십시오 .
때로는 border
s 를 지운 후에도 .
the reason is that you have images inside the td
, giving the images display:block
solves it.
참고URL : https://stackoverflow.com/questions/2039438/removing-unwanted-table-cell-borders-with-css
'developer tip' 카테고리의 다른 글
Visual Studio 2012의 웹 사이트 관리 도구는 어디에 있습니까? (0) | 2020.10.14 |
---|---|
PHP에서 문자열의 일부를 어떻게 바꾸나요? (0) | 2020.10.14 |
numpy 배열에 0 만 포함되어 있는지 테스트 (0) | 2020.10.13 |
LLDB (Swift) : 원시 주소를 사용 가능한 유형으로 캐스팅 (0) | 2020.10.13 |
JSON 문자열에서 반환 된 Objective-C의 null 값 확인 (0) | 2020.10.13 |