Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

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

<div id="responsive-container">
<table class="table-s">
...
</table>
</div>

Open in new window


.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*/
    }
}

Open in new window


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>

Open in new window


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]-->

Open in new window


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;
}

Open in new window

Avatar of Shaun Vermaak
Shaun Vermaak
Flag of Australia image

Have a look at the bootstrap table styles. It is a good start
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
...
<table class="table-s table-bordered table-striped">

Open in new window

http://jsfiddle.net/humotrj0/260/
Avatar of weikelbob

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
Avatar of Shaun Vermaak
Shaun Vermaak
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

<div id="responsive-container">
<table class="table-s">
...
</table>
</div>

Open in new window


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
I see. This may work.

How do I do the blue striping?
Got this, thank you.