Programing

CSS-테이블 내부에만 테두리

lottogame 2020. 5. 15. 07:57
반응형

CSS-테이블 내부에만 테두리

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

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;
}

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

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입니다.

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

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

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

예보기 ...

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

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

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

<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>

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를 참조하십시오.

일반적인 테이블 마크 업의 경우 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

이것은 작동해야합니다 :

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>

그것은 CSS없이 모든 것을 할 것입니다 <TABLE BORDER=1 RULES=ALL FRAME=VOID>

코드 : HTML 코드 튜토리얼

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

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/

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>

참고URL : https://stackoverflow.com/questions/1257430/css-border-only-inside-the-table

반응형

'Programing' 카테고리의 다른 글

Android 레이아웃 요소의 배경색 설정  (0) 2020.05.15
여러 열의 고유성 확인  (0) 2020.05.15
오류 : eventlet을 설치하는 동안 'gcc'명령이 종료 상태 1로 실패했습니다.  (0) 2020.05.15
파이썬에서 max-heap 구현에 무엇을 사용합니까?  (0) 2020.05.15
최근 SVN 로그 항목은 어떻게 보입니까?  (0) 2020.05.15

'Programing'의 다른글

  • 현재글CSS-테이블 내부에만 테두리

관련글

댓글

티스토리툴바