Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 15 ■ TABLES


Removed and Hidden Rows and Columns


HTML


<h1>Removed & Hidden Rows & Columns</h1>

<table id="t1">
<tbody class="b1">
<tr class="r1"> <td class="c1">r1 c1</td> <td class="c2">2</td>
<td class="c3">r1 c3</td> <td class="c4">4</td> </tr>

<tr class="r2"> <td class="c1">r2 c1</td> <td class="c2">2</td>
<td class="c3">r2 c3</td> <td class="c4">4</td> </tr></tbody>

<tbody class="b2">
<tr class="r3"> <td class="c1">r3 c1</td> <td class="c2">2</td>
<td class="c3">r3 c3</td> <td class="c4">4</td> </tr>

<tr class="r4"> <td class="c1">r4 c1</td> <td class="c2">2</td>
<td class="c3">r4 c3</td> <td class="c4">4</td> </tr></tbody>

<tbody class="b3">
<tr class="r5"> <td class="c1">r5 c1</td> <td class="c2">2</td>
<td class="c3">r5 c3</td> <td class="c4">4</td> </tr></tbody>
</table>

<!-- Second identical table with separated borders is not shown -->

CSS


#t1 .c2 { display:none; } /* Removing column */
#t1 .c3 { visibility:hidden; } /* Hiding column */
#t1 .r2 { visibility:hidden; } /* Hiding row */
#t1 .b2 { display:none; } /* Removing row group */

/* Nonessential styles are not shown */
Free download pdf