Reputation: 46
Responsive table
I need help with a responsive table. What's needed is to basically have it change to a 'mobile version' upon resizing, however the mobile version is a little different to the main style of it, as the image shows.
I've currently got this: http://jsfiddle.net/MLsZ8/
HTML:
<table class="crafting">
<thead>
<tr>
<th style="width:15%">Name</th>
<th style="width:20%">Ingredients</th>
<th style="width:205px;">Input > Output</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ore Blocks</td>
<td>Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</td>
<td><img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" /></td>
<td>Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</td>
</tr>
</tbody>
</table>
CSS:
td {
border:0;
}
table.crafting {
border-spacing:0;
border-collapse:collapse;
}
.crafting th {
border:2px solid #f3f3f3;
padding:5px;
}
.crafting td {
border:2px solid #f3f3f3;
padding:5px;
vertical-align:top;
}
.crafting tr {
background:#c6c6c6;
}
.crafting-name {
font-weight:bold;
border-bottom:0 !important;
background:#c6c6c6;
}
.crafting-ingredients {
border-top:0 !important;
border-bottom:0 !important;
background:#bcbcbc;
}
.crafting-img {
width:205px;
border-bottom:0 !important;
border-top:0 !important;
background:#c6c6c6;
}
.crafting-desc {
border-top:0 !important;
background:#bcbcbc;
}
Upvotes: 2
Views: 5395
Answers (8)
Reputation: 301
Responsive Tables JavaScript Plugin
<link rel="stylesheet" href=".../dist/css/table-fluid.css"/>
<script src=".../dist/js/table-fluid.js"></script>
<table class="table-fluid">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Use JavaScript function
window.tableFluid('.table-fluid');
https://www.npmjs.com/package/table-fluid
https://github.com/maestro888/table-fluid
Upvotes: 0
Reputation: 347
here simple demo please reffer this link for pure css demo fiddle
/*by Ñ££¿ Upadhyay*/
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;a
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 18px;
margin: 10px;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: 10px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
font-size: 14px;
letter-spacing: 0;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 14px;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: 5px;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: 14px;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
padding-right: 70px;
}
table td:last-child {
border-bottom: 0;
}
}<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Acount">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
</tbody>
</table>Upvotes: 0
Reputation: 10914
Well, I was also searching for the same one day. Got the following. It follows the same approach, converting columns to rows when getting viewed in smaller device.
http://css-tricks.com/responsive-data-tables/
Before moving ahead see the Live Demo
Upvotes: 1
Reputation: 587
Option 1:
Full tables
Option 2
Convert tables to div in used mediaqueries
HTML
<div class="title">
<div class="name">Name</div>
<div class="ingredients">Ingredients</div>
<div class="field">Input > Output</div>
<div class="description">Description</div>
</div>
<div class="responsive">
<div class="name">Ore Blocks</div>
<div class="ingredients">Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</div>
<div class="field">
<img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" />
</div>
<div class="description">Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</div>
</div>
CSS
div {
display: table;
width: 100%;
table-layout: fixed;
}
div > div {
display: table-cell;
background : #C6C6C6;
border:2px solid #f3f3f3;
padding:5px;
vertical-align : top;
}
div.title {
text-align : center;
font-weight:bold;
}
div.name {
width : 90px;
}
div.ingredients {
width : 150px;
}
div.field {
width : 205px;
}
@media only screen and (max-width: 767px) {
.title {display:none;}
.responsive div {
display : block;
width : auto;
text-align : center;
background : white;
}
.responsive div.ingredients {background : #C6C6C6;}
.responsive div.description {background : #C6C6C6;}
}
Example: http://jsfiddle.net/2DTSG/
Upvotes: 1
Reputation: 582
Twitter Bootstrap is a nice thing to achieve table-responsiveness.
http://getbootstrap.com/
You have to download it from the above link and add the css file.
After that, apply like this: http://getbootstrap.com/css/#tables-responsive
I hope this may help your need.
Thanks
Upvotes: 0
Reputation: 3130
One simple solution is to have two tables: a regular table (with class full) and a mobile one (with class mobile). Then you can use a media query to switch between them at a particular screen size.
If your website isn't particularly heavy, this is an approach that will save a lot of headache.
Example fiddle: http://jsfiddle.net/QDrPb/
.mobile {
display:none;
}
@media (max-width:767px) {
.full {
display:none;
}
.mobile {
display:block;
}
}
Upvotes: 0
Reputation: 69
If you are not opposed to changing the overall format of the HTML, I have a solution that might be a bit easier to handle...
If you change the current table structure to a series of div elements, you can nest each table row into a container div.
I'll give you an example for one "row":
<div class="tableRow">
<div class="columnOne"> content </div>
<div class="columnTwo"> content </div>
<div class="columnThree"> content </div>
<div class="columnFour"> content </div>
</div>
Then, using CSS, you could set .tableRow {width: 100%}. From here, you could set the column widths based on your needs. From your example, it looks like you could do:
.columnOne {width: 10%; float: left;}
.columnTwo {width: 15%; float: left;}
.columnThree {width: 30%; float: left;}
.columnFour {width: 45%; float: left;}
Then, when you reach your mobile view breakpoint, using a @media query, you can do the following:
.columnOne, .columnTwo, .columnThree, .columnFour {width: 100%}
This will cause the columns to effectively become rows of width: 100%.
Upvotes: 1
Reputation: 114437
Table cells cannot rearrange they way you want - rows and columns are locked and cannot float. All you can do is change the layout WITHIN each cell. You will need to change your mark-up completely to make that happen.
Upvotes: -2