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;
}
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%.
Option 1:
Full tables
http://jsfiddle.net/2655u/
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/
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
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;
}
}
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
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>
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
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.
Related
I am displaying some information in a normal table for desktop viewing. In that table long paragraphs of text wrap perfectly fine. But when it shift to mobile view, where the columns are all stacked the long text overwrites itself.
Normal Table View
Mobile Table View
Here is my html:
<div id="card">
<table class="table">
<thead class="thead-dark">
<tr>
<th>Date</th><th>User</th><th>Description</th><th>Text</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Date">2020-01-23 14:29:14</td><td data-label="User">Lylellen Hederstrom</td>
<td data-label="Desc">Owner Contact Information</td>
<td data-label="Text ">This code is owned by ZP Growers. 3824 Sunset Dr. Fallbrook, CA 92028</td>
</tr>
<tr>
<td data-label="Date">2020-01-28 15:41:26</td><td data-label="User">Lyle Kafader</td>
<td data-label="Desc">ZP Growers Purchase</td>
<td data-label="Text ">October 2014, $2500, TractorsPlus, Phoenix AZ. This is the story of bringing the tractor back to Valley Center. I had to borrow Riley's truck because my little Nissan could not haul a big enough trailer. The trailer that I rented didn't have sway bars which made for a very exciting trip through a windy desert.</td>
</tr>
</tbody>
</table>
</div>
Here is my CSS:
#media screen and (max-width: 760px) {
#card table {
border: 0;
table-layout: fixed;
width: 95%;
}
#card table thead {
display: none;
}
#card table tr {
margin-bottom: 20px;
dispaly: block;
border-bottom: 2px solid #ddd;
box-shadow: 2px 2px 1px #dadada;
height: auto;
}
#card table td {
display: block;
text-align: right;
font-size: 13px;
height: 100%;
width: 100%;
word-wrap: break-word;
}
#card table td::before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
#card tbody {
line-height:0!important;
}
}
*Note, this question has basically been overhauled from a previous version so as to be more precise. Thus some of the answers below do not completely the restructed question.
I have two sets of data which I need to display tabulated. As both sets of data need to have the column widths (but still be dynamic), I am using two <tbody>'s.
I am trying to set a heading for each of the tabulated data, in a way that the heading takes up the width of the entire <tbody>.
I have tried using table-caption, but it does not apply to the tbody, but the table itself. Meaning all captions look to go to the top of the table, regardless of where they are in the html.
To demonstrate what I am running into, see the following snippet:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
tbody:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100%;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<caption>Caption1</caption>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<caption>Caption2</caption>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
My current attempt is to use :before. But as you can see, the :before does not take up the entire width of the tbody. Even with width: 100% it does not work.
Another way I realized it could be done is to have another row for each tbody, and set colspan to equal the amount of columns for that table. Like this:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<tr>
<th colspan="2">Title1</th>
</tr>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th colspan="2">Title2</th>
</tr>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
However, the only problem there is that it does not become dynamic and requires you to know how many columns there will be ahead of time. Normally this would not be a problem but I am looking for a more dynamic solution in my case.
My question is: How does one add a caption to a tbody (not the table) in a way so that each caption relates to the applicable tbody and not the table
You just need to set the width to 100vw. This sets the width to 100% of the viewport width. For a more in-depth explanation of viewport width, see this article.
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
#tbody1:before, #tbody2:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100vw;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th, td {
padding: 4px 0px;
border: 1px solid black;
}
<table>
<tbody id="tbody1">
<tr>
<th>bob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th>dob</th>
</tr>
</tbody>
</table>
I would like to create a responsive table like this
Now, I have some large content of data(which is filled dynamically) for each cell, and if you notice this table overlaps the contents on least screen size(300 px and less). Though this can be managed, but I would like to have any optimal solution for this, if possible.
Any help would be appreciated.
It may be your answer please see result in full screen
table tr td,table tr td{
text-align: center;
}
#media only screen and (max-width: 500px) {
table,head,tbody,th,td,tr {
display: block;
}
thead tr {
display: none;
}
tr {
border: 1px solid #ccc;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
min-height: 30px;
overflow: hidden;
word-break:break-all;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
text-align:left;
font-weight: bold;
}
td:before { content: attr(data-title); }
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Name">John</td>
<td data-title="ID">100</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Shyam</td>
<td data-title="ID">101</td>
<td data-title="designation">Quality Analyst</td>
</tr>
<tr>
<td data-title="Name">Mark</td>
<td data-title="ID">102</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Bill</td>
<td data-title="ID">104</td>
<td data-title="designation">Quality Analyst</td>
</tr>
<tr>
<td data-title="Name">Arjun</td>
<td data-title="ID">105</td>
<td data-title="designation">Human Resources</td>
</tr>
<tr>
<td data-title="Name">Pratyush</td>
<td data-title="ID">106</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Anant</td>
<td data-title="ID">101</td>
<td data-title="designation">Administrative Dept</td>
</tr>
</tbody>
</table>
</body>
</html>
In above snippet you can use media query which screen size you want to stack td of table eg:300px
Kailash Chandra's answer gave me the clue for something I was trying to do. I wanted a 2 column table that was very compact in most cases, and Bootstrap always forces a minimum width on the first column. I just wanted a table that would act like a table until I got down to phone size, and then have it turn into a single row alternating a heading and the value below it. That turned out to be pretty trivial with this bit of css, which basically just uses the same trick to make it quit acting like a table. In this case I'm not changing anything else about it as it meets my need, but it would be easy enough to add some styling.
#media only screen and (max-width: 400px) {
.flyout-table table,
.flyout-table th,
.flyout-table td,
.flyout-table tr {
display: block;
}
}
How can I display my image and the table on the same level? This is really depressing me because I can't get "inline-block" to work. :(
<p id="play">
hey
</p>
<div id="menu">
<table>
<tr>
<td>Models</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Modern Houses</td>
</tr>
<tr>
<td>Vacation Spots</td>
</tr>
<tr>
<td>Sports and Outdoors</td>
</tr>
<tr>
<td>Books</td>
</tr>
<tr>
<td>Abandoned Houses</td>
</tr>
<tr>
<td>Summer Wear</td>
</tr>
<tr>
<td>Makeups</td>
</tr>
<tr>
<td id="site">Site Info</td>
</tr>
</table>
</div>
<img src="C:\Users\Elexie\Documents\Downloads\faki2.jpg"/>
body {
background: #181818;
margin: 0;
padding: 0;
}
/* set body display to inline-table*/
#play {
background: black;
color: white;
margin: 0;
padding: 0;
height: 35px;
}
table,td {
color: white;
border: 1px solid white;
border-collapse: collapse;
width: 160px;
padding: 10px;
font-family: ;
}
table {
}
#site {
height: 350px;
}
img {
float: right;
}
I changed the picture, but it's of similar size
http://jsfiddle.net/w6d5g/
In your css code:
table{
float:left;
}
Should do the trick.
Read more: http://www.w3schools.com/css/css_float.asp
Check this fiddle: http://jsfiddle.net/Mohamed_nabil/F8MKp/
/*******Added style******/
img
{
/*165px is your Menu width with borders*/
max-width: calc(100% - 165px);
/*For cross browser*/
-webkit-max-width: calc(100% - 165px);
-moz-max-width: calc(100% - 165px);
-o-max-width: calc(100% - 165px);
-ms-max-width: calc(100% - 165px);
display: inline-block;
vertical-align: top;/* Can be middle, bottom */
}
#menu{
display: inline-block;
}
Firstly, wrap your image tag with a div. Name this div anything you want. Let's name it: "image-test".
<div class="image-test">
<img src="(URL for IMAGE)">
</div>
Next, let's say you want your table to take up 50% of the width and your image to take up the other 50%. We are also going to float these div elements so they are not in the flow of the document.
#menu{
float:left;
width:50%;
}
.image-test{
float:left;
width:50%;
}
You'll notice your image is larger than the containing div, so let's set a max width on all images to avoid future problems.
img {
max-width:100%;
}
EDIT 2: I'm talking about the layout of the table, not the colours.
I need to style my table so that it appears as such:
The idea is to have the first th td pair on top and the rest should be in line under it.
Is that feasible through CSS?
I don't have control over the HTML here so CSS is my only option.
Edit:
Here's the HTML
<div class="content">
<table>
<thead>
<tr>
<th class="thtitle" >
Title </th>
<th class="thvalue" >
Value </th>
<th class="thquantity" >
Quantity </th>
<th class="thsum" >
Sum </th>
</tr>
</thead>
<tbody>
<tr class="first">
<td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
</tr>
<tr class="last">
<td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
</tr>
</tbody>
</table>
</div>
Edit 2:
I've added a fiddle that does exactly what you want, but be warned that nth-child doesnt play nice in IE8. It also assumes that the HTML you gave us is ALWAYS that way [ie always has the same amount of th/td's].
http://jsfiddle.net/8awAj/
Edit:
Is the html you posted ALWAYS like that? Ie never any more or less headings etc?
This isn't 100% what you want, but its kind of close. To get exactly what you want you would have to do a LOT of manual absolute positioning using :nth-child which would be horrible.
http://jsfiddle.net/9JWpA/
table {
width: 100%;
padding-top: 40px;
position: relative;
}
th {
background: yellow;
}
td {
background: green;
}
th,
td {
top: 40px;
width: 16.666%;
position: absolute;
}
th:first-child,
td:first-child {
width: 100%;
top: 0;
left: 0;
}
td:first-child {
top: 20px;
}
th:nth-child(2) {
left: 0;
}
td:nth-child(2) {
left: 16.666%;
}
th:nth-child(3) {
left: 33.333%;
}
td:nth-child(3) {
left: 49.998%;
}
th:nth-child(4) {
left: 66.666%;
}
td:nth-child(4) {
left: 83.33%;
}
try this..
http://jsfiddle.net/9JWpA/
html:
<table cellspacing=0;>
<tr><th colspan="6">th</th></tr>
<tr><td colspan="6">td</td></tr>
<tr><th>th</th><td>td</td><th>th</th><td>td</td><th>th</th><td>td</td></tr>
</table>
css:
table
{
width:200px;
border:1px solid black;
text-align:left;
}
th
{
background:yellow;
}
td
{
background:green;
}