weikelbob
asked on
CSS: Making responsive table look nicer
On this table in the product description
http://www.idiaper.com/prevail-bladder-control-pads
Can you make it look like this table (heading "Sizing table") with just a CSS change:
http://www.idiaper.com/attends-underwear-super-plus-absorbency
Here's the CSS and HTML of the first table
Here's the code of the second table
also in <head>
and the CSS for the second table:
http://www.idiaper.com/prevail-bladder-control-pads
Can you make it look like this table (heading "Sizing table") with just a CSS change:
http://www.idiaper.com/attends-underwear-super-plus-absorbency
Here's the CSS and HTML of the first table
<div id="responsive-container">
<table class="table-s">
...
</table>
</div>
.table-s {
min-width: 460px;
width: 100%;
display: table !important;
}
#responsive-container {
overflow-x: auto;
width: 100%;
}
@media (min-width: 460px){
.table-s {
min-width: 460px;
width: 460px; //or the value you prefer here
/*you can also apply other rules like margin and borders or background accordingly to your taste and design*/
}
}
Here's the code of the second table
<div id="product1">
<table>
<thead>
<tr class="producthead">
<th>Size</th>
<th>Waist/Hip</th>
<th>Capacity</th>
<th>Qty</th>
<th>SKU/Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Youth/Small</td>
<td>22-36"</td>
<td>Moderate to Heavy</td>
<td>20/pk or 80/cs</td>
<td>APP0710</td>
</tr>
<tr>
<td class="bluetr">Medium</td>
<td class="bluetr">34-44"</td>
<td class="bluetr">Moderate to Heavy</td>
<td class="bluetr">20/pk or 80/cs</td>
<td class="bluetr">APP0720</td>
</tr>
<tr>
<td>Large</td>
<td>44-58"</td>
<td>Moderate to Heavy</td>
<td>18/pk or 72/cs</td>
<td>APP0730</td>
</tr>
<tr>
<td class="bluetr">X-Large</td>
<td class="bluetr">58-68"</td>
<td class="bluetr">Moderate to Heavy</td>
<td class="bluetr">14/pk or 56/cs</td>
<td class="bluetr">APP0740</td>
</tr>
</tbody>
</table>
also in <head>
<!--[if !IE]><!-->
<style>
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
#product1 table, #product1 thead, #product1 tbody, #product1 th, #product1 td, #product1 tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.producthead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#product1 tr { border: 1px solid #ccc; }
#product1 td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
#product1 td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 18px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
#product1 td:nth-of-type(1):before { content: "Size"; }
#product1 td:nth-of-type(2):before { content: "Waist/Hip"; }
#product1 td:nth-of-type(3):before { content: "Capacity"; }
#product1 td:nth-of-type(4):before { content: "Qty"; }
#product1 td:nth-of-type(5):before { content: "SKU/Code"; }
}
</style>
<!--<![endif]-->
and the CSS for the second table:
// Generic responsive table styling
#product1 table {
width: 100%;
border-collapse: collapse;
}
// Zebra striping
#product1 tr:nth-of-type(odd) {
background: #eee;
}
#product1 th {
background: #333;
color: white;
font-weight: bold;
padding:18px;
}
#product1 td, #product1 th {
padding: 18px;
border: 1px solid #ccc;
text-align: left;
}
#product-body strong
{
font-size:130%;
color:#126b9a;
}
#product1 th, #product1 td
{
font-size:17px;
font-weight:400;
}
.bluetr
{
background-color:#a8d5ed;
}
ASKER
Hoping to make it look exactly the same. Not have the same responsiveness, I know that's impossible. But the same look and colors.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Is there any way to do it that doesn't change the html. I just want the same colors and borders.
This can't change
SnappySnippy wanted me to change the HTML
This can't change
<div id="responsive-container">
<table class="table-s">
...
</table>
</div>
SnappySnippy wanted me to change the HTML
SnappySnippy is a tool that exports the HTML/CSS/Styles to a service like JSFiddle.
Once you have done that you can post JSFiddle and we can help you get styles
Once you have done that you can post JSFiddle and we can help you get styles
ASKER
I see. This may work.
How do I do the blue striping?
How do I do the blue striping?
ASKER
Got this, thank you.
Open in new window
http://jsfiddle.net/humotrj0/260/