programing

테이블 내부에만 테두리를 적용하려면 어떻게 해야 합니까?

newstyles 2023. 8. 27. 08:59

테이블 내부에만 테두리를 적용하려면 어떻게 해야 합니까?

나는 테이블 안에만 테두리를 추가하는 방법을 찾고 있습니다.내가 할 때:

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

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

편집: 이러한 유사 클래스에 대한 조금 더 많은 정보는 쿼크 모드에서 찾을 수 있으며, 예상대로 IE 지원 측면에서 당신은 거의 S.O.L.입니다.

이것은 나에게 효과가 있습니다.

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

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

보기 예제...

FF 3.6 및 Cromium 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>

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

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 에서 확인할 수 있습니다.

i7, i8과의 호환성을 유지하기 위해 마지막 아이가 아닌 첫째 아이를 사용할 것을 제안합니다.

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

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx 에서 CSS 2.1 유사 클래스에 대해 배울 수 있습니다.

이것은 작동할 것입니다.

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: 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 코드 튜토리얼

tbody/head/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>

다음을 사용하여 각 셀에 테두리를 추가합니다.

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/

이렇게 하면 됩니다.

HTML:

<table frame="void" rules="all">

CSS:

td, th {
    border: 1px solid red;
}

언급URL : https://stackoverflow.com/questions/1257430/how-can-i-apply-a-border-only-inside-a-table

'programing' 카테고리의 다른 글

php에서 에이잭스를 통해 요청할 때 세션 ID가 변경되는 이유는 무엇입니까?  (0) 2023.08.27
HTML 테이블과 함께 정렬 가능한 jQuery UI 사용  (0) 2023.08.27
스프링 주석을 사용하여 동일한 클래스의 여러 콩 인스턴스화  (0) 2023.08.27
JavaScript: 문자열의 마지막 텍스트 바꾸기  (0) 2023.08.27
텍스트 영역에 대한 val() vs. text()  (0) 2023.08.27

'programing'의 다른글

  • 현재글테이블 내부에만 테두리를 적용하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바