HTML 테이블 행에 테두리 제공, <tr>

이 테이블 행을 경계까지 가능 <tr>하나 대신, 개별 셀에 테두리를주는 이동에 <td>같은,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

이것은 주어진 주위에 테두리를 제공 <tr>하지만 개별 셀 주위에 테두리가 필요합니다.

<tr>한 번에 국경을 넘길 수 있습니까 ?

→ jsFiddle

요소 border에 속성을 설정할 수 tr있지만 CSS 2.1 사양에 따르면 이러한 속성은 분리 된 테두리 모델에 영향을주지 않으며 브라우저에서 기본값이되는 경향이 있습니다. 참고 : 17.6.1 경계 분리 모델 . 합니다 ( 초기 값은 border-collapse이다 separateCSS 2.1에 따라, 일부 브라우저는로 설정 기본값 에 대한 table. 어쨌든 순 효과는 당신이하지 않는 한 명시 적으로보고 특정 거의 모든 브라우저에서 경계를 구분 얻을 것입니다 collapse.)

따라서 축소 테두리를 사용해야합니다. 예:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

물론! 그냥 사용

<tr style="outline: thin solid">

당신이 좋아하는 행. 여기에 바이올린이 있습니다.

물론 사람들이 언급했듯이 ID, 클래스 또는 원하는 경우 다른 방법을 통해이를 수행 할 수 있습니다.

예. 내 답변 DEMO를 업데이트했습니다.

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

하나만 스타일링하고 싶다면 <tr>클래스로 할 수 있습니다 : Second DEMO

CSS 클래스를 사용하십시오.

tr.border{
    outline: thin solid;
}

다음과 같이 사용하십시오.

<tr class="border">...</tr>

tr 요소의 box-shadow 속성을 테두리의 대체로 사용할 수 있습니다. 플러스로 동일한 요소의 border-radius 속성이 상자 그림자에도 적용됩니다.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

왼쪽 셀 :

style="border-style:solid;border-width: 1px 0px 1px 1px;"

중간 세포 :

style="border-style:solid;border-width: 1px 0px 1px 0px;"

오른쪽 셀 :

style="border-style:solid;border-width: 1px 1px 1px 0px;"

테두리 간격 추가 : 0rem 0.5rem; 하단에 각 셀 (td, th) 항목에 대한 공간을 만들고 셀 사이에 공간을 두지 않습니다.

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

오랫동안 이것으로 싸운 후 나는 놀랍도록 간단한 대답은 테이블의 모든 행을 같은 수의 셀로 채우기 위해 테이블을 빈 셀로 채우는 것입니다 (분명히 colspan을 고려). 컴퓨터에서 생성 된 HTML을 사용하면 정렬이 매우 간단하고 복잡한 해결 방법과의 싸움을 피할 수 있습니다. 그림은 다음과 같습니다.

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>