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 }

몇 가지 CSS를 추가하십시오.

td, th {
   border:none;
}

다음과 같이 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 {
 border-style : hidden!important;
}

cellspacing테이블 의 속성을로 설정합니다 0.

CSS 스타일을 사용할 수도 border-spacing: 0있지만 이전 버전의 IE를 지원할 필요가없는 경우에만 가능합니다.

추가 할 수도 있습니다.

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;테이블 요소에 지정해보십시오 .

때로는 borders 를 지운 후에도 .

그 이유는 내부에 이미지가 있고 td이미지가 display:block문제를 해결하기 때문입니다.