weikelbob
asked on
How do I spruce up these 2 tables and make them totally different?
Hello,
I am creating 2 responsive tables. I'm wondering how to totally spruce them up. I want them to look very, very different from these tables - http://www.idiaper.com/tranquility-premium-overnight-pull-ons - to where they don't look like the same tables at all. Not necessarily looking for you to write all the CSS, just looking for CSS ideas. Should look dramatically different than that link, not just different colors. Any help is appreciated. No javascript allowed, just CSS.
I am creating 2 responsive tables. I'm wondering how to totally spruce them up. I want them to look very, very different from these tables - http://www.idiaper.com/tranquility-premium-overnight-pull-ons - to where they don't look like the same tables at all. Not necessarily looking for you to write all the CSS, just looking for CSS ideas. Should look dramatically different than that link, not just different colors. Any help is appreciated. No javascript allowed, just CSS.
<div id="overall-product-description">
<p><Description.
</p>
<p><strong>Measurements and Price</strong></p>
<div id="product-meas-table">
<table padding="5">
<thead>
<tr class="head-of-table">
<th>Size</th>
<th>Color</th>
<th>Measurements</th>
<th>Absorbency</th>
<th>Package Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>X-Small</td>
<td>White</td>
<td>17"-28"</td>
<td>20.3 fl.oz.</td>
<td>22 per pack or 88 per case</td>
</tr>
<tr>
<td>Small</td>
<td>White</td>
<td>22"-36"</td>
<td>20.3 fl.oz.</td>
<td>20 per pack or 72 per case</td>
</tr>
<tr>
<td>Medium</td>
<td>White</td>
<td>34"-48"</td>
<td>34 fl.oz.</td>
<td>18 per pack or 72 per case</td>
</tr>
<tr>
<td>Large</td>
<td >White</td>
<td>44"-54"</td>
<td>34 fl.oz.</td>
<td>16 per pack or 64 per case</td>
</tr>
<tr>
<td>X-Large</td>
<td>White</td>
<td>48"-66"</td>
<td>34 fl.oz.</td>
<td>14 per pack or 56 per case</td>
</tr>
<tr>
<td>2X-Large</td>
<td>White</td>
<td>62"-80"</td>
<td>34 fl.oz.</td>
<td>12 per pack or 48 per case</td>
</tr>
</tbody>
</table></div><br />
<br />
<div id="table2">
<p><strong>Product Features</strong></p>
<table>
<tbody>
<tr>
<td>Brand</td>
<td>Tranquility</td>
</tr>
<tr>
<td>Type</td>
<td>Urinary</td>
</tr>
<tr>
<td>Who for?</td>
<td>Men, Women, and Youth</td>
</tr>
<tr>
<td>Sizes</td>
<td>X-Small, Small, Medium, Large, XL, 2XL</td>
</tr>
<tr>
<td>Absorbency</td>
<td>20.3 fl.oz for xS and small, 34 fl.oz.for rest</td>
</tr>
<tr>
<td>Features for fit</td>
<td>Full panel waist elastic, elastic around leg openings</td>
</tr>
<tr>
<td>Comfort level</td>
<td>High</td>
</tr>
<tr>
<td>Comes by the Pack</td>
<td>Yes</td>
</tr>
<tr>
<td>Reusable or Disposable</td>
<td>Disposable</td>
</tr>
<tr>
<td>Backing </td>
<td>Waterproof cloth-like backing</td>
</tr>
<tr>
<td>Type of Odor Control</td>
<td>Peach mat core</td>
</tr>
<tr>
<td>Does it have Leak Guards</td>
<td>Yes</td>
</tr>
<tr>
<td>Take clothing off to change</td>
<td>To put on, yes, but to take off - no: tear-away sides</td>
</tr>
<tr>
<td>Each Wrapped Individually</td>
<td>No</td>
</tr>
<tr>
<td>Where is it made</td>
<td>USA</td>
</tr>
<tr>
<td>Alternatives</td>
<td>>Tranquility ATN (brief version of this product), Tranquility Smartcore (for bowel incontinence)</a></td>
</tr>
<tr>
<td>Helpers</td>
<td>Booster pads,underpads</td>
</tr>
<tr>
<td>Diagnosis often used for</td>
<td>Full incontinence, moderate incontinence, heavy incontinence, overnight incontinence</td>
</tr>
<tr>
<td>Bariatric Alternatives above 80" waist</td>
<td>Tranquility Bariatric Brief</td>
</tr> <tr>
<td>Works for bowel incontinence</td>
<td>Not specifically designed for but may absorb a little. Try Tranquility Slimline for bowel.</td>
</tr> <tr>
<td>Will hold a complete bladder loss</td>
<td>Yes</td>
</tr>
</tbody>
</table></a>
</div>
</div>
This CSS Styles will apply for all tables inside the Div ID "table2"
you can duplicate this set and give the name #table1 and change background, border colors, font-size etc.
you can duplicate this set and give the name #table1 and change background, border colors, font-size etc.
#table2 > table {
width: 100%;
border-spacing: 0;
margin: 0;
padding: 0;
border-top: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
}
#table2 > table th {
padding: 10px;
background: #ffdd51;
color: #000;
font-weight: 500;
border-bottom: 1px solid #c2c2c2;
border-left: 1px solid #c2c2c2;
}
#table2 > table td {
border-left: 1px solid #c2c2c2;
}
#table2 > table tr td {
border-bottom: 1px solid #c2c2c2;
padding: 10px;
}
#table2 > table tr:nth-child(odd) {
background-color: #e3f1ec;
}
#table2 > table tr:nth-child(even) {
background-color: #dee3ea;
}
ASKER
@Prasadh Baapaat: I like that a lot. Looks good. Any way to make it even more dramatic. Pure CSS bootstrap is OK.
@Rob Jurd: Pure CSS bootstrap is OK.
@Rob Jurd: Pure CSS bootstrap is OK.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Past that, I'll put my hand up that I'm not much of a designer LOL, apologies if it's not spruced up enough
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You both were helpful. I'm going to check into boostrap for the future, but Prasadh gave me a great start.
Thanks.
Thanks.
http://getbootstrap.com/css/#tables