테이블 행 <tr>에 경계 하단 추가

3 x 3의 테이블이 있습니다. 모든 행의 맨 아래에 테두리를 추가 tr하고 특정 색상을 부여 하는 방법이 필요합니다 .

먼저 직접 방법을 시도했습니다.

<tr style="border-bottom:1pt solid black;">

그러나 그것은 효과가 없었습니다. 그래서 다음과 같이 CSS를 추가했습니다.

tr {
border-bottom: 1pt solid black;
}

여전히 작동하지 않았습니다.

CSS를 사용하는 것이 좋습니다. 왜냐하면 style모든 행에 속성을 추가 할 필요가 없기 때문 입니다. 에 border속성을 추가하지 않았습니다 <table>. CSS에 영향을 미치지 않기를 바랍니다.

나는 전에 이와 같은 문제가 있었다. tr테두리 스타일을 직접 사용할 수 있다고 생각하지 않습니다 . 내 해결 방법은 td행 에서 s의 스타일을 지정하는 것이 었습니다 .

<tr class="border_bottom">

CSS :

tr.border_bottom td {
  border-bottom:1pt solid black;
}

border-collapse:collapse테이블 규칙에 추가 하십시오.

table { 
    border-collapse: collapse; 
}

링크

사용하여 border-collapse:collapse테이블과 border-bottom: 1pt solid black;TR에

사용하다

border-collapse:collapse Nathan이 쓴대로 설정해야합니다.

td { border-bottom: 1px solid #000; }

여기에 불완전한 답변이 많이 있습니다. tr태그에 테두리를 적용 할 수 없으므로 다음과 같이 td또는 th태그에 테두리 를 적용해야합니다 .

td {
  border-bottom: 1pt solid black;
}

이렇게하면 각 사이에 작은 공간이 남게 td되므로 테두리를 tr태그 처럼 보이게하려면 바람직하지 않습니다 . "틈을 메우려면" 요소 의 border-collapse속성 을 활용 table하고 값을로 설정 collapse해야합니다.

table {
  border-collapse: collapse;
}

사용하다

table{border-collapse:collapse}
tr{border-top:thin solid}

"씬 솔리드"를 CSS 속성으로 바꾸십시오.

행을 블록으로 표시하십시오.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

대체 색상을 간단히 표시하려면 :

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

이 box-shadow속성을 사용하여 tr요소 의 테두리를 가짜로 만들 수 있습니다 . box-shadow두께를 조정하려면 Y 위치 (아래 2px로 표시)를 조정하십시오.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

나는 추가를 시도했다

    table {
      border-collapse: collapse;
    }   

함께

    tr {
      bottom-border: 2pt solid #color;
    }

그런 다음 국경 붕괴를 주석 처리하여 무엇이 효과가 있는지 확인했습니다. bottom-border 속성을 가진 tr 선택기를 사용하면 나를 위해 일했습니다!

국경 CSS 없음 ex.

국경 사진 없음

CSS 테두리 ex.

국경 사진 라이브 테이블

이 방법을 사용할 때 td 요소 사이의 공간으로 인해 경계에 틈이 생겼지 만 두려움은 없습니다 ...

이 문제를 해결하는 한 가지 방법 :

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

CSS로 :

td.end{
    border:2px solid black;
}

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

전체 행에서도 동일하게 수행 할 수 있습니다.

있다 border-bottom-style, border-top-style, border-left-style, border-right-style. 또는 간단히 border-style네 경계 모두에 한 번에 적용됩니다.

자세한 내용은 여기 (및 온라인으로 시도 )를 참조하십시오 .

몇 가지 흥미로운 답변. 테두리 하단 (또는 상단)을 원하기 때문에 여기에 두 가지가 더 있습니다. 3px 두께의 파란색 테두리를 원한다고 가정합니다. 스타일 섹션에서 추가 할 수 있습니다

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

테이블 코드에서

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

이것에 대한 또 다른 해결책은 border-spacing재산입니다.

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

CSS 테두리 하단이 없습니다.

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

tr 요소에 테두리를 넣을 수 없습니다. 이것은 파이어 폭스와 IE 11에서 나를 위해 일했습니다.

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}