The purpose of this style is to group tables on the same line when viewed on a wider screen. They will adjust at smaller screen widths so they won't overlap. This style works best with four or fewer small tables of similar size; otherwise, they will not align correctly. You can find similar code for use with images and text blocks in the Image and Other modules respectively.
Use with Caution: this style relies on an unsupported Canvas class, so if it "breaks" or when viewed in the Canvas mobile app, the tables will display in a vertical row.
Example
<div class="grid-row" style="grid-gap: 5%; margin: 0; width: 100%;">
<div class="col-xs" style="margin: 1rem 0; padding: 0;">
<table style="border-collapse: collapse; width: 100%;" border="1">
<caption style="color: #BE0000;">Basic Table 1</caption>
<tbody>
<tr style="background-color: #BE0000; color: #FFFFFF;">
<th style="text-align: left; white-space: nowrap;" scope="col">Types of Things</th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<th style="text-align: left; background-color: #E2E6E6;" scope="row">Thing 1</th>
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
</tr>
<tr>
<th style="text-align: left; background-color: #E2E6E6;" scope="row">Thing 2</th>
<td style="text-align: center;">4</td>
<td style="text-align: center;">5</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs" style="margin: 1rem 0; padding: 0;">
<table style="border-collapse: collapse; width: 100%;" border="1">
<caption style="color: #BE0000;">Basic Table 2</caption>
<tbody>
<tr style="background-color: #BE0000; color: #FFFFFF;">
<th style="text-align: left; white-space: nowrap;" scope="col">Types of Things</th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<th style="text-align: left; background-color: #E2E6E6;" scope="row">Thing 1</th>
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
</tr>
<tr>
<th style="text-align: left; background-color: #E2E6E6;" scope="row">Thing 2</th>
<td style="text-align: center;">4</td>
<td style="text-align: center;">5</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs" style="margin: 1rem 0; padding: 0;">
<table style="border-collapse: collapse; width: 100%;" border="1">
<caption style="color: #BE0000;">Basic Table 3</caption>
<tbody>
<tr style="background-color: #BE0000; color: #FFFFFF;">
<th style="text-align: left; white-space: nowrap;" scope="col">Types of Things</th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<th style="text-align: left; background-color: #E2E6E6;" scope="row">Thing 1</th>
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
</tr>
<tr>
<th style="text-align: left; background-color: #E2E6E6;" scope="row">Thing 2</th>
<td style="text-align: center;">4</td>
<td style="text-align: center;">5</td>
</tr>
</tbody>
</table>
</div>
</div>
Click to copy
Guidelines and Modifications
- The width for each table should be set at 100%.
- Limit the number of tables to four or fewer to get a good result.
- We used "white-space: nowrap;" to keep the longer row headers on the same line. You can add that to other headers or remove it for shorter headers or if you want them to wrap.
Instructions for Use
- Create your tables.
- Copy the code provided and paste it into the page in the HTML view.
- Replace the filler table with your table code in HTML view.
- Make sure each table has its width set to 100%.
- To add more than 3 tables in a row, copy and paste the last<div>section and paste it before the two closing</div>tags and follow the steps above.
- See the Tables module for more information on styling tables.
- Save.
0 Comments
Add your comment