Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Table

This is the caption for the table. Here you can add additional information
Positie Type Trein Traject Status
1 Sprinter Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39) Deze trein heeft volgens de norm gereden
2 Sprinter Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39) Deze trein heeft volgens de norm gereden
3 Sprinter Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39) Deze trein heeft volgens de norm gereden
4 Sprinter Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39) Deze trein heeft volgens de norm gereden
5 Sprinter Amsterdam Centraal (16:04) ->Haarlem - Uitgeest - Alkmaar - Hoorn (17:39) Deze trein heeft volgens de norm gereden
6 Sprinter Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39) Deze trein heeft volgens de norm gereden
7 Sprinter Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39) Deze trein heeft volgens de norm gereden
8 Sprinter Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39) Deze trein heeft volgens de norm gereden
9 Row title #1 Description row 1
.tableContainer

In order for the table to have the correct styling it needs to be wrapped inside the .richText container. This class will give it its zebra striped styling.
The .tableContainer--fade adds a white fade on the side. This will give the user an indication that there is more information by scrolling sideways. Make sure the table has this class.

If you want to add additional or supporting information just add the <caption> tag right after the <table> tag. The caption will be placed at the bottom of the table.

You might have noticed that the <table> tag has some attributes. These are optional and makes the table even more concrete.

important:
If *don't want the yellow line under the table headers use <td> instead of <th>.

Markup

<div class="richText">
<div class="tableContainer tableContainer--fade">
        <div class="tableContainer__scroll">
            <div class="tableContainer__content" data-table="">
               <table border="0" cellpadding="1" cellspacing="1" id="idTable" summary="Samenvatting">
               <caption>This is the caption for the table. Here you can add additional information</caption>
                   <thead>
                       <tr class="responsiveTable__headerRow">
                           <th scope="col" style="min-width: 100px;"><strong>Positie</strong></th>
                           <th scope="col" style="min-width: 150px;"><strong>Type Trein</strong></th>
                           <th scope="col" style="min-width: 400px;"><strong>Traject</strong></th>
                           <th scope="col" style="min-width: 300px;"><strong>Status</strong></th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td>1</td>
                           <td>Sprinter</td>
                           <td>Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39)</td>
                           <td>Deze trein heeft volgens de norm gereden</td>
                       </tr>
                       <tr>
                           <td>2</td>
                           <td>Sprinter</td>
                           <td>Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39)</td>
                           <td>Deze trein heeft volgens de norm gereden</td>
                       </tr>
                       <tr>
                           <td>3</td>
                           <td>Sprinter</td>
                           <td>Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39)</td>
                           <td>Deze trein heeft volgens de norm gereden</td>
                       </tr>
                       <tr>
                           <td>4</td>
                           <td>Sprinter</td>
                           <td>Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39)</td>
                           <td>Deze trein heeft volgens de norm gereden</td>
                       </tr>
                       <tr>
                           <td>5</td>
                           <td>Sprinter</td>
                           <td>Amsterdam Centraal (16:04) -&gt;Haarlem - Uitgeest - Alkmaar - Hoorn (17:39)</td>
                           <td>Deze trein heeft volgens de norm gereden</td>
                       </tr>
                       <tr>
                           <td>6</td>
                           <td>Sprinter</td>
                           <td>Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39)</td>
                           <td>Deze trein heeft volgens de norm gereden</td>
                       </tr>
                       <tr>
                           <td>7</td>
                           <td>Sprinter</td>
                           <td>Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39)</td>
                           <td>Deze trein heeft volgens de norm gereden</td>
                       </tr>
                       <tr>
                           <td>8</td>
                           <td>Sprinter</td>
                           <td>Amsterdam Centraal (16:04) - Haarlem - Uitgeest - Alkmaar - Hoorn (17:39)</td>
                           <td>Deze trein heeft volgens de norm gereden</td>
                       </tr>
                       <tr>
                           <td>9</td>
                           <td><a href="javascript:void(0)">Row title #1</a></td>
                           <td>Description row 1</td>
                           <td></td>
                       </tr>
                   </tbody>
               </table>
            </div>
        </div>
        <div class="tableContainer__fadeElement" style="height: 719px;"></div>
    </div>
</div>