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

@@ -14,8 +14,10 @@
<div class="panel__heading">
<h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1>
</div>
</div>
<table class="usa-table-borderless" width="100%">
<div class='responsive-table-wrapper'>
<table>
<thead>
<tr>
<th scope="col">Order ID</th>
@@ -42,9 +44,6 @@
{% end %}
</tbody>
</table>
</div>
</div>
</div>

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>