같은 곳곳 러러 를?? ???
여러 개 주세요<tbody>같은 태그<table>만약 그렇다면, 어떤 시나리오에서 여러 개를 사용해야 합니까?<tbody>태그?
예, 예를 들어 다음과 같이 데이터 그룹을 보다 쉽게 스타일링할 수 있습니다.
thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5; border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; }<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>여기서 예를 볼 수 있습니다.새로운 브라우저에서만 동작합니다만, 이것이 현재 사용하고 있는 어플리케이션에서 서포트하고 있는 것입니다.JavaScript 등의 그룹화를 사용할 수 있습니다.중요한 것은 데이터를 훨씬 더 읽기 쉽게 하기 위해 행을 시각적으로 그룹화할 수 있는 편리한 방법입니다.물론 다른 용도도 있지만, 적용 가능한 예에 관해서는 이것이 가장 일반적인 것입니다.
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
그래서 하나 또는 그 이상을 예상한다.그리고 나서 다음과 같이 말한다.
테이블 행 그룹 간에 규칙이 필요한 경우 여러 tbody 섹션을 사용합니다.
이 사양의 예에 따라 실행할 수 있습니다.w3-structure-tables
테이블 행은 각각 THEAD, TFOT 및 TBODY 요소를 사용하여 테이블 헤드, 테이블 풋 및 하나 이상의 테이블 본체 섹션으로 그룹화할 수 있습니다.
Martin Joiner의 문제는 다음 사항에 대한 오해로 인해 발생합니다.<caption>태그를 붙입니다.
그<caption>tag는 표 캡션을 정의합니다.
그<caption>태그는 의 첫 번째 아이여야 합니다.<table>태그를 붙입니다.
테이블당 하나의 캡션만 지정할 수 있습니다.
또, 다음의 점에 주의해 주세요.scopeAtribute는 Atribute에 배치해야 합니다.<th>에 없는 요소<tr>요소.
멀티헤더 멀티바디 테이블을 작성하려면 다음과 같이 하십시오.
<table id="dinner_table">
<caption>This is the only correct place to put a caption.</caption>
<tbody>
<tr class="header">
<th colspan="2" scope="col">First Half of Table (British Dinner)</th>
</tr>
<tr>
<th scope="row">1</th>
<td>Fish</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Chips</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Peas</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Gravy</td>
</tr>
</tbody>
<tbody>
<tr class="header">
<th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
</tr>
<tr>
<th scope="row">5</th>
<td>Pizza</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Salad</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Oil</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Bread</td>
</tr>
</tbody>
</table>예. 테이블에서 관련 부분(예: 과정)을 동적으로 숨기거나 드러내는 데 사용합니다.비즈.
<table>
<tbody id="day1" style="display:none">
<tr><td>session1</td><tr>
<tr><td>session2</td><tr>
</tbody>
<tbody id="day2">
<tr><td>session3</td><tr>
<tr><td>session4</td><tr>
</tbody>
<tbody id="day3" style="display:none">
<tr><td>session5</td><tr>
<tr><td>session6</td><tr>
</tbody>
</table>
여러 행을 개별적으로 처리하지 않고 TBody를 조작함으로써 모든 것 또는 오늘을 전환할 수 있는 버튼을 제공할 수 있다.
편집:caption태그는 테이블에 속하므로 1회만 존재해야 합니다.관련짓지 않다caption각각과 함께tbody내가 한 것과 같은 요소:
<table>
<caption>First Half of Table (British Dinner)</caption>
<tbody>
<tr><th>1</th><td>Fish</td></tr>
<tr><th>2</th><td>Chips</td></tr>
<tr><th>3</th><td>Pease</td></tr>
<tr><th>4</th><td>Gravy</td></tr>
</tbody>
<caption>Second Half of Table (Italian Dinner)</caption>
<tbody>
<tr><th>5</th><td>Pizza</td></tr>
<tr><th>6</th><td>Salad</td></tr>
<tr><th>7</th><td>Oil</td></tr>
<tr><th>8</th><td>Bread</td></tr>
</tbody>
</table>
위의 나쁜 예: 복사하지 마십시오.
위의 예는 예상대로 렌더링되지 않습니다.이러한 글쓰기는 다음 명령어에 대한 오해를 나타내고 있기 때문입니다.caption태그. 올바르게 렌더링하려면 많은 CSS 해커가 필요합니다.표준에 어긋나기 때문입니다.
W3C 표준을 검색했습니다.caption태그를 지정했지만 1개만 있어야 함을 나타내는 명시적 규칙을 찾을 수 없습니다.caption이치노
테이블과 부모 ng-repeat이 2개 있는 JSFidle을 작성했습니다.표의 행을 검사하면 상위 수준과 같은 6개의 tbody 요소가 있습니다.
HTML
<div>
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th>Store ID</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody data-ng-repeat="storedata in storeDataModel.storedata">
<tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
<td>{{storedata.store.storeId}}</td>
<td>{{storedata.store.storeName}}</td>
<td>{{storedata.store.storeAddress}}</td>
<td>{{storedata.store.storeCity}}</td>
<td>{{storedata.data.costTotal}}</td>
<td>{{storedata.data.salesTotal}}</td>
<td>{{storedata.data.revenueTotal}}</td>
<td>{{storedata.data.averageEmployees}}</td>
<td>{{storedata.data.averageEmployeesHours}}</td>
</tr>
<tr data-ng-show="dayDataCollapse[$index]">
<td colspan="2"> </td>
<td colspan="7">
<div>
<div class="pull-right">
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th></th>
<th>Date [YYYY-MM-dd]</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
<td class="pullright">
<button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
</button>
</td>
<td>{{dayData.date}}</td>
<td>{{dayData.cost}}</td>
<td>{{dayData.sales}}</td>
<td>{{dayData.revenue}}</td>
<td>{{dayData.employees}}</td>
<td>{{dayData.employeesHoursSum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
(부주:양쪽 레벨에 많은 데이터가 있는 경우는, DOM 에 가득 차기 때문에, 데이터를 취득해 치환하도록 지시하고 있습니다.즉, 부모클릭시 DOM 에 추가하고, 다른 부모클릭시 또는 같은 부모클릭시 삭제하도록 지시하고 있습니다.Prisjakt.nu에서 볼 수 있는 동작을 얻으려면 나열된 컴퓨터까지 스크롤하여 행(링크 아님)을 클릭합니다.이 작업을 수행하고 요소를 검사하면 tr이 추가되고 부모 또는 다른 요소를 클릭하면 삭제됩니다.)
언급URL : https://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table
'programing' 카테고리의 다른 글
| 0 대 1 정규화를 실행하는 방법 Excel (0) | 2023.04.18 |
|---|---|
| VB에서의 인라인리스트 초기화그물 (0) | 2023.04.18 |
| PowerShell의 $?와 $LastExitCode의 차이 (0) | 2023.04.18 |
| 연결 매니저에 대한 AcquireConnection 메서드 호출이 오류 코드 0xC0202009로 실패했습니다. (0) | 2023.04.18 |
| 최신 커밋으로 정렬된 Git 브랜치 목록을 가져오려면 어떻게 해야 합니까? (0) | 2023.04.18 |