테이블 셀에 테두리를 추가하는 방법은 무엇입니까?

Question

테이블 셀에 테두리를 추가하려고하는데 rowspan을 사용하여 테두리를 만드는 방법을 알 수 없습니다.

4 셀이있는 테이블을 원합니다. 왼쪽에 큰 셀 1 개, 큰 셀 오른쪽에 3 개의 작은 셀이 있습니다.

가 여기에 내가

를 사용하는 코드의 jsfiddle [도트] 그물/1fv4dz5g/3/

Answer 1

이것은 CSS를 사용하여 수행 할 수 있습니다. 이 CSS 샘플을 확인

td { 
 
    border: 1px solid black; 
 
}

<table class="tnews-side" border="0"> 
 

 
<tr> 
 
<td rowspan="3"> 
 
<table border="1" cellpadding="4" cellspacing ="0">Row 1 Cell 1</table> 
 
</td> 
 
    <td>Row 1 Cell 2</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 2 Cell 2</td> 
 
</tr> 
 
<tr> 
 
    <td>Row 2 Cell 2</td> 
 
</tr> 
 
</table>

Answer 2

가이 사용하는 CSS 수행하는 2 가지 방법은 다음과 같습니다

각 설정

/모든 td 클래스는 및 CSS 국경 사용

<style> 
.bigCell{border:1px solid black;} 
.smallCell{border-left:1px solid black;} 
</style> 
... 
<td class="biCell"> 
... 
<td class="smallCell"> 

을 중첩 선택 또는 :nth-child() 선택 자

를 사용할 수 있습니다.

<style> 
table tr:nth-child(2) td 
{ 
    border:... 
} 

</style> 

사항을 확인할 수 있습니다 http://jsfiddle.net/1fv4dz5g/5/ : https://css-tricks.com/almanac/selectors/n/nth-child/