이 테이블 행을 경계까지 가능 <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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>이것은 주어진 주위에 테두리를 제공 <tr>하지만 개별 셀 주위에 테두리가 필요합니다.
<tr>한 번에 국경을 넘길 수 있습니까 ?
답변
요소 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;"
답변
<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>