테이블 행에 테두리-아래쪽 추가

테이블 행에 테두리-아래쪽 추가

저는 3x3 테이블이 있습니다.모든 행의 하단에 테두리를 추가하는 방법이 필요합니다.tr특정한 색깔을.

먼저 직접적인 방법을 시도했습니다. 예를 들어:

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

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

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

그건 여전히 효과가 없었습니다.

CSS를 사용하고 싶습니다. 그러면 추가할 필요가 없기 때문입니다.style모든 행에 속성을 지정합니다.저는 추가하지 않았습니다.border에 귀속시키다<table>. 저는 그것이 제 CSS에 영향을 미치지 않기를 바랍니다.

테이블 규칙에 추가:

table { 
    border-collapse: collapse; 
}

예

table {
  border-collapse: collapse;
}

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

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

링크

전에 이런 문제가 있었습니다.아닌 것 같아요.tr테두리 스타일링을 직접 할 수 있습니다.제가 해결할 수 있는 방법은tds 행:

<tr class="border_bottom">

CSS:

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

사용하다border-collapse:collapse테이블 위에 그리고border-bottom: 1pt solid black;여행중에

사용하다

border-collapse:collapse네이선이 쓴 것처럼 당신은 그들의 죽음을

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

여기에 불완전한 답들이 많습니다.테두리를 적용할 수 없기 때문에tr태그, 당신은 그것을 적용할 필요가 있습니다.td아니면th태그는 다음과 같습니다.

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

이렇게 하면 각각의 공간 사이에 작은 공간이 남게 됩니다.td, 만약 당신이 국경이 그것인 것처럼 보이기를 원한다면 그것은 바람직하지 않을 것 같습니다.trtag. '공백 메우기'를 위해서는 다음을 활용해야 합니다.border-collapse에 있는 재산table요소 및 값을 다음으로 설정합니다.collapse, 다음과 같습니다.

table {
  border-collapse: collapse;
}

사용할 수 있습니다.box-shadow의 테두리를 속이기 위한 재산tr요소.의 Y 위치 조정box-shadow(below는 px로 표시) 두께를 조절합니다.

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

그리고 나서 무엇이 효과가 있는지 알아보기 위해 국경 collapse에 대해 언급했습니다.바닥 경계의 부동산을 가진 tr 셀렉터가 나를 위해 작동했습니다!

테두리 CSS ex가 없습니다.

테두리 사진 라이브 없음

CSS 보더 ex.

테두리 사진이 있는 테이블

사용하다

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

"thin solid"를 CSS 속성으로 바꿉니다.

행을 블럭으로 표시합니다.

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

대체 색상을 간단하게 표시하려면 다음과 같이 하십시오.

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

원치 않으시면

• 국경의 붕괴를 테이블 위에 강제합니다.
• TD 요소 스타일링을 사용합니다.

::후 선택기를 사용하여 TR에 테두리를 추가할 수 있습니다.

table tbody tr {
    position : relative; # to contain the ::after element within the table-row
}

table tbody tr td {
    position : relative; # needed to apply a z-index
    z-index : 2; # needs to be higher than the z-index on the tr::after element
}

table tbody tr::after {
    content : '';
    position : absolute;
    z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
    border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}

테이블 행 사이에 간격을 둬야 해서 테이블 위에 테두리 붕괴를 추가할 수 없는 시나리오에서 사용한 간단한 트릭입니다. 결과는 다음과 같습니다.

도움이 되길 바랍니다 :)

이에 대한 또 다른 해결책은 다음과 같습니다.

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

table {
  border-spacing: 0px;
}

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

이 방법을 사용할 때 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네 개의 경계에 동시에 적용됩니다.

자세한 내용은 여기에서 확인(및 TRY YOURSELF 온라인)할 수 있습니다.

몇 가지 재미있는 답이 있습니다.테두리 하단(또는 상단)만 원하시니 여기 두 개가 더 있습니다.파란색 테두리 두께가 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>

CSS 테두리 하단 없음:

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

삼각형에 테두리를 둘 수는 없습니다.파이어폭스와 IE 11에서 작동했습니다.

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

국경선을 가지고 있는 것입니다.<td>대신에<tr>보통은 가야할 길입니다.하지만, 만약 당신이 함께 일한다면,<td>높이가 다르고 레이아웃을 엉망으로 만들어서 선형 그래디언트를 적용할 수 있습니다.<tr>같은 일을 이루다

table tr, table {
  border-spacing:0;
}
table td {
  padding:12px;
}

/* conventional method - applied to <td> */
table tr:first-child td {
  border-bottom:1px solid black;
}

/* alternative - applied to <tr>*/
table tr:last-child {
  background: linear-gradient(0deg, black 1px, transparent 1px);
}

<table>
  <tr>
    <td>td border bottom</td>
    <td>(conventional)</td>
  </tr>
  <tr>
    <td>tr gradient background</td>
    <td>(alternative)</td>
  </tr>
</table>

HTML

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

CSS

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

언급URL : https://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr