표 안에 만 테두리를 적용하려면 어떻게해야합니까?

195

테이블 내부에만 테두리를 추가하는 방법을 알아 내려고합니다. 내가 할 때 :

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

경계는 전체 테이블 주위와 테이블 셀 사이에 있습니다. 내가 달성하고자하는 것은 테이블 셀 주위에 테이블 내부에만 테두리를 두는 것입니다 (테이블 주위에 외부 테두리 없음).

다음은 테이블에 사용하는 마크 업입니다 (중요하지 않다고 생각하더라도).

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

다음은 대부분의 테이블에 적용되는 몇 가지 기본 스타일입니다.

table {
    border-collapse: collapse;
    border-spacing: 0;
}
html  css  html-table  border 
— 리차드 노브
소스
셀 주위에만 테두리가 보입니다. 각 셀에는 테두리가 있으므로 테이블에 테두리가있는 것 같습니다. 아마도 질문이 없습니까?
— Chetan S
3
내부 테두리 라고도 합니다.
— 기계 달팽이

답변:

203

내가 생각하는 것을하고 있다면 다음과 같은 것이 필요합니다.

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle 데모

문제는 모든 셀 주위에 '전체 테두리'를 설정하여 전체 테이블 주위에 테두리가있는 것처럼 보입니다.

건배.

편집 : 그 의사 클래스에 대한 약간의 정보는 quirksmode 에서 찾을 수 있으며 , 예상대로 IE 지원 측면에서 거의 SOL입니다.

— IV
소스
이와 같은 간단한 테이블을 사용하면 다음 형제 콤비 네이터를 사용하여 의사 클래스를 사용하지 않는 훨씬 짧은 솔루션이 있습니다. 내 대답을 참조하십시오.
— dalgard
1
@theIV는 5 년 이상 전에 답변되었지만 '새로운'/ '보다 효율적인'방법이 있습니까?
— jbutler483
테이블의 첫 번째 열에서 rowspan을 사용하면 작동하지 않습니다.
— Jack
192

이것은 나를 위해 작동합니다 :

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

예보기 ...

FF 3.6 및 Chromium 5.0에서 테스트 한 IE는 지원이 없습니다. 에서 W3C :

'테두리 스타일'이 '숨겨 짐'인 테두리는 다른 모든 충돌 테두리보다 우선합니다. 이 값을 가진 테두리는이 위치의 모든 테두리를 억제합니다.

— Anthonyrisinger
소스
1
테이블 테두리가 필요하지 않는 한 이것이 가장 우아한 솔루션입니다.
— cjroth
42

원하는 효과를 얻을 수 있는 매우 간단한 방법의 예 :

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>
— 조니
소스
13
"MAGIC"은 다음과 같이 설명 frame 하고 rules있습니다 OLD (안 HTML5를) table 속성 (대신 CSS를 사용한다). frame일부 어떤 말한다 외부 표 테두리가 표시되어야합니다 - void수단이 모든 외부 테두리를 숨길 ... rules일부있는 말합니다 내부 표 테두리가 표시되어야합니다 - all그들 모두의 수단이 ... 분명 ... 당신이하지 않는 한,이 사용하지 마십시오 HTML3 광신자입니다 ... :)
— jave.web
1
테두리와 같은 것을 추가하십시오 : 1px 검은 색으로 표의 바깥 쪽 경계에 테두리가 생깁니다.
— Aaron Liu
1
내가 읽고 있던 웹 사이트의 엄청나게 간격이있는 테이블에 약간의 가독성을 빠르게 추가하기 위해 2020 년에 매력처럼 작동했습니다. 실제로 이것은 내부 경계에 충분합니다 : rules = "all"
— Edoardo Facchinelli
11

ie7, ie8과의 호환성으로 인해 마지막 자식이 아닌 첫 번째 자식을 사용하는 것이 좋습니다.

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

CSS 2.1 의사 클래스에 대한 자세한 내용은 http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx를 참조하십시오.

— 크리스 부트
소스
이것은 훌륭한 솔루션입니다. 그러나 테이블 셀 중 하나에 다른 테이블이 있고 내부 경계를 보려면 "내부"테이블에 대한 다른 CSS 행 세트가 필요합니다.
— Michael Biermann
10

일반적인 테이블 마크 업의 경우 IE 7 이하를 제외한 BrowserStack의 모든 장치 / 브라우저에서 작동하는 간단한 솔루션이 있습니다.

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

IE 7 지원을 위해 다음을 추가하십시오.

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

테스트 사례는 여기에서 볼 수 있습니다 : http://codepen.io/dalgard/pen/wmcdE

— 달 가르드
소스
위대한-이것은 또한 테이블을 표시하지 않고 평가자에게 다른 테두리를 설정할 수있게합니다.
— jsbueno
5

이것은 작동해야합니다 :

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

편집하다:

방금 시도했지만 테이블 테두리는 없습니다. 그러나 테이블 테두리를 설정하면 border-collapse에 의해 제거됩니다.

이것은 테스트 파일입니다.

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>
— 루피 너스
소스
그것은 효과가 없었습니다. 나는 그것을 시도했습니다. 첫 번째 게시물을 편집하겠습니다.
— Richard Knop
0

이것을 사용하여 각 셀에 테두리를 추가하십시오.

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

첫 번째 행의 모든 ​​셀에서 상단 테두리를 제거하십시오.

table > tbody > tr:first-child > td { border-top: 0; }

첫 번째 열의 셀에서 왼쪽 테두리를 제거하십시오.

table > tbody > tr > td:first-child { border-left: 0; }

마지막 열의 셀에서 오른쪽 테두리를 제거하십시오.

table > tbody > tr > td:last-child { border-right: 0; }

마지막 행의 셀에서 아래쪽 테두리를 제거하십시오.

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

— 브라이언
소스
0

tbody / thead / tfoot 및 td / th의 모든 조합에 적용

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}
<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>
스 니펫 확장

— 사용자 1119279
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.