Assorted table and layout fixes

This commit is contained in:
Andrew Croce
2018-07-24 11:01:48 -04:00
parent 0a3c1a00df
commit cac4ab0b72
5 changed files with 75 additions and 37 deletions

View File

@@ -175,39 +175,41 @@
</ul>
</section>
<table class='col--grow'>
<thead>
<tr>
<th class='table-cell--expand'>Expanded Column</th>
<th>Normal Column</th>
<th class='table-cell--align-right'>Right Aligned</th>
<th class='table-cell--shrink'>Shrunk</th>
</tr>
</thead>
<div class='responsive-table-wrapper'>
<table>
<thead>
<tr>
<th class='table-cell--expand'>Expanded Column</th>
<th class='table-cell--hide-small'>Hidden on Small</th>
<th class='table-cell--align-right'>Right Aligned</th>
<th class='table-cell--shrink'>Shrunk</th>
</tr>
</thead>
<tbody>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td>Table Cell</td>
<td class='table-cell--align-right'>1,234.56</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
<tbody>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td class='table-cell--hide-small'>Table Cell</td>
<td class='table-cell--align-right'>1,234.56</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td>Table Cell</td>
<td class='table-cell--align-right'>1,231,253.43</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td class='table-cell--hide-small'>Table Cell</td>
<td class='table-cell--align-right'>1,231,253.43</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td>Table Cell</td>
<td class='table-cell--align-right'>564.54</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
</tbody>
</table>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td class='table-cell--hide-small'>Table Cell</td>
<td class='table-cell--align-right'>564.54</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
</tbody>
</table>
</div>
<div class='action-group'>
<a href='/styleguide' class='action-group__action usa-button usa-button-big'>Action Group Button</a>