Skip to content

Commit

Permalink
Changed responsive tables to a class
Browse files Browse the repository at this point in the history
  • Loading branch information
@acburst
acburst committed Jan 20, 2015
1 parent 79f9c84 commit 792e079
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 35 deletions.
30 changes: 15 additions & 15 deletions bin/materialize.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2131,55 +2131,55 @@ td, th {
border-radius: 2px; }

@media only screen and (max-width : 992px) {
table {
table.responsive-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
/* sort out borders */ }
table th, table td {
table.responsive-table th, table.responsive-table td {
margin: 0;
vertical-align: top; }
table th {
table.responsive-table th {
text-align: left; }
table thead {
table.responsive-table thead {
display: block;
float: left; }
table thead tr {
table.responsive-table thead tr {
display: block;
padding: 0 10px 0 0; }
table tbody {
table.responsive-table tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap; }
table tbody tr {
table.responsive-table tbody tr {
display: inline-block;
vertical-align: top; }
table th {
table.responsive-table th {
display: block;
text-align: right; }
table td {
table.responsive-table td {
display: block;
min-height: 1.25em;
text-align: left; }
table tr {
table.responsive-table tr {
padding: 0 10px; }
table thead {
table.responsive-table thead {
border: 0;
border-right: 1px solid #d0d0d0; }
table.bordered th {
table.responsive-table.bordered th {
border-bottom: 0;
border-left: 0; }
table.bordered td {
table.responsive-table.bordered td {
border-left: 0;
border-right: 0;
border-bottom: 0; }
table.bordered tr {
table.responsive-table.bordered tr {
border: 0; }
table.bordered tbody tr {
table.responsive-table.bordered tbody tr {
border-right: 1px solid #d0d0d0; }
}

Expand Down
30 changes: 15 additions & 15 deletions css/ghpages-materialize.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2131,55 +2131,55 @@ td, th {
border-radius: 2px; }

@media only screen and (max-width : 992px) {
table {
table.responsive-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
/* sort out borders */ }
table th, table td {
table.responsive-table th, table.responsive-table td {
margin: 0;
vertical-align: top; }
table th {
table.responsive-table th {
text-align: left; }
table thead {
table.responsive-table thead {
display: block;
float: left; }
table thead tr {
table.responsive-table thead tr {
display: block;
padding: 0 10px 0 0; }
table tbody {
table.responsive-table tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap; }
table tbody tr {
table.responsive-table tbody tr {
display: inline-block;
vertical-align: top; }
table th {
table.responsive-table th {
display: block;
text-align: right; }
table td {
table.responsive-table td {
display: block;
min-height: 1.25em;
text-align: left; }
table tr {
table.responsive-table tr {
padding: 0 10px; }
table thead {
table.responsive-table thead {
border: 0;
border-right: 1px solid #d0d0d0; }
table.bordered th {
table.responsive-table.bordered th {
border-bottom: 0;
border-left: 0; }
table.bordered td {
table.responsive-table.bordered td {
border-left: 0;
border-right: 0;
border-bottom: 0; }
table.bordered tr {
table.responsive-table.bordered tr {
border: 0; }
table.bordered tbody tr {
table.responsive-table.bordered tbody tr {
border-right: 1px solid #d0d0d0; }
}

Expand Down
46 changes: 44 additions & 2 deletions jade/page-contents/table_content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,10 +242,51 @@ <h2 class="header">Centered Table</h2>
</div>
</div>

</div><!-- End Tables Section -->
</div>

<div id="centered" class="section scrollspy">
<h2 class="header">Responsive Table</h2>
<div class="row">
<div class="col s12">
<p>Add <code class="language-markup">class="responsive-table"</code> to the table tag to make the table horizontally scrollable on smaller screen widths.</p>
<table class="responsive-table">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
<tr>
<td>Shannon</td>
<td>KitKat</td>
<td>$9.99</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>

</div>

</div><!-- End Tables Section -->

<div class="col hide-on-small-only m3 l2">
<div style="height: 1px;">
Expand All @@ -255,6 +296,7 @@ <h2 class="header">Centered Table</h2>
<li><a href="#striped">Striped</a></li>
<li><a href="#hoverable">Hoverable</a></li>
<li><a href="#centered">Centered</a></li>
<li><a href="#responsive">Responsive</a></li>
</ul>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion sass/components/_global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ td, th{
// Responsive Table
@media #{$medium-and-down} {

table {
table.responsive-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
Expand Down
46 changes: 44 additions & 2 deletions table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,10 +337,51 @@ <h2 class="header">Centered Table</h2>
</div>
</div>

</div><!-- End Tables Section -->
</div>

<div id="centered" class="section scrollspy">
<h2 class="header">Responsive Table</h2>
<div class="row">
<div class="col s12">
<p>Add <code class="language-markup">class="responsive-table"</code> to the table tag to make the table horizontally scrollable on smaller screen widths.</p>
<table class="responsive-table">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
<tr>
<td>Shannon</td>
<td>KitKat</td>
<td>$9.99</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>

</div>

</div><!-- End Tables Section -->

<div class="col hide-on-small-only m3 l2">
<div style="height: 1px;">
Expand All @@ -350,6 +391,7 @@ <h2 class="header">Centered Table</h2>
<li><a href="#striped">Striped</a></li>
<li><a href="#hoverable">Hoverable</a></li>
<li><a href="#centered">Centered</a></li>
<li><a href="#responsive">Responsive</a></li>
</ul>
</div>
</div>
Expand Down

0 comments on commit 792e079

Please sign in to comment.