CSS를 사용하여 테이블 표현

Question

이와 같은 시나리오를 고려하십시오.

문자열 배열의 배열 목록이 있습니다.

아래와 같은 이미지로 표현하고 싶습니다.

현재 저는 이것을 표로 구현했습니다. 그러나 이것은 역동적이지 않습니다. 앞으로 나는 루프를 두 번 반복해야만 어려워 보인다.

<table> 
    <tr> 
    <td>Pack1</td> 
    <td>Ch1</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td>ch2</td> 
    </tr> 
    <tr> 
    <td>Pack2</td> 
    <td>val1</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td>val2</td> 
    </tr> 
</table> 

CSS 스타일을 사용하는 다른 방법을 알려주세요.

다시 루프 각 팩을 통해 모든 팩을 통해

1. 루프 값을 얻을 수 있습니다.

Answer 1

당신의 목표와 비슷하게 보이는 좀 더 구조화 된 테이블 형식을 게시했는데 정확히 원하는 바가 분명하지 않기 때문에 감자 튀김이 될 것 같습니다. colspan 및 rowspan을 사용하는 방법을 알고 있다면 테이블을 의도 한 방법과 대부분 기본적으로 스타일을 고려해도 테이블을 조정할 수 있습니다 (예 : 단일 열에 여러 행이 필요한 경우). 몇 가지 CSS와 텍스트를 추가하여 사물을 활용할 때 (X) HTML 표가 작동하는 방식을 알 수 있습니다.

루핑만큼 나는 "패키지"라는 아이디어를 테이블의 파티션과 같은 요소 인 tbody 요소에 적용 할 수 있다고 생각합니다 ... 그들은 자신의 별도 그룹을 가지고 있지만 같은 종류의 데이터의 일부입니다.

댓글 조정하는 데 도움이 필요하면 어렵지 않습니다.

<table summary="Describe your table here." style="border: 1px solid #aaa; border-collapse: collapse; width: 40%;"> 

<thead style="background-color: #f77;"> 
<tr><td colspan="3">Table Header</td></tr> 
</thead> 

<tfoot style="background-color: #f77;"> 
<tr><td colspan="3">Table Footer</td></tr> 
</tfoot> 


<tbody> 
<tr style="background-color: #fcc;"><th colspan="3">Pack 1 (Tbody Header)</th></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
</tbody> 


<tbody> 
<tr style="background-color: #fcc;"><th colspan="3">Pack 2 (Tbody Header)</th></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
</tbody> 

</table>