Solved

Styling Tables and Cells

Posted on 2013-12-21
3
284 Views
Last Modified: 2013-12-22
I already have some code and it has been working.  I need to add another table inside the body
<div class="colmask rightmenu">
	<div class="colleft">
		<div class="col1">

			<table style="width: 70%; float:left">
				<tr>
					<th>Description</th>
					<th>Cost</th>
				</tr>
				<tr>
					<td>Gateway Set-Up Fee</td>
					<td id="costs">Free</td>
				</tr>
				<tr>
					<td>Monthly Gateway Fee</td>
					<td>Free</td>
				</tr>
				<tr>
					<td><strong>Qualified Discount Fee</strong> - Keyed Visa / 
					MasterCard / Discover Card</td>
					<td>1.90%</td>
				</tr>
				<tr>
					<td><strong>Qualified Transaction Rate</strong> - Keyed 
					Visa / MasterCard / Discover Card</td>
					<td>25&cent;</td>
				</tr>
				<tr>
					<td><strong>Non Qualified Discount Fee</strong> - Keyed Visa / MasterCard / Discover Per Sale Fee
 Rewards / International / Corporate / Cards </td>
					<td>2.90%</td>
				</tr>
				<tr>
					<td><strong>Non Qualified Transaction Fee</strong> - Keyed Visa / MasterCard / Discover Per Sale Fee
 Rewards / International / Corporate / Card&cent;</td>
					<td>30&cent;</td>
				</tr>
</table>
			<!-- Column 1 end -->
		</div>
		<div class="col2">
			<!-- Start of Navigation -->
			<!--#include file="includes/nav-ecomm.asp" -->
			<!-- End of Navigation -->

Open in new window

I have this CSS but it needs a little work  but I am mainly looking to add a bottom border, and have no margin, and center the Costs - the second column.  But the few things I have tried but I cannot get it to work, with the exception of adding it inline
<td style="text-align:center">30&cent;</td>

Open in new window

which of course I would not want to do.


Thank you!
style.css
0
Comment
Question by:coreybryant
  • 2
3 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39734170
Added class .tdprice{text-align:center;}  http://jsbin.com/aceGEZE/1/

 <div class="colmask rightmenu">
	<div class="colleft">
		<div class="col1">

			<table style="width: 70%; float:left">
				<tr>
					<th>Description</th>
					<th class="tdprice">Cost</th>
				</tr>
				<tr>
					<td>Gateway Set-Up Fee</td>
					<td id="costs">Free</td>
				</tr>
				<tr>
					<td>Monthly Gateway Fee</td>
					<td class="tdprice">Free</td>
				</tr>
				<tr>
					<td><strong>Qualified Discount Fee</strong> - Keyed Visa / 
					MasterCard / Discover Card</td>
					<td class="tdprice">1.90%</td>
				</tr>
				<tr>
					<td><strong>Qualified Transaction Rate</strong> - Keyed 
					Visa / MasterCard / Discover Card</td>
					<td class="tdprice">25&cent;</td>
				</tr>
				<tr>
					<td><strong>Non Qualified Discount Fee</strong> - Keyed Visa / MasterCard / Discover Per Sale Fee
 Rewards / International / Corporate / Cards </td>
					<td class="tdprice">2.90%</td>
				</tr>
				<tr>
					<td class="tdbottom"><strong>Non Qualified Transaction Fee</strong> - Keyed Visa / MasterCard / Discover Per Sale Fee
 Rewards / International / Corporate / Card&cent;</td>
					<td class="tdprice tdbottom">30&cent;</td>
				</tr>
</table>
			<!-- Column 1 end -->
		</div>
		<div class="col2">
			<!-- Start of Navigation -->
			<!--#include file="includes/nav-ecomm.asp" -->
			<!-- End of Navigation -->

Open in new window

0
 
LVL 29

Author Comment

by:coreybryant
ID: 39734751
Thanks - that worked on that site.  Since selling some of the sites - I am re-doing some of them and for some reason I could not  get that to work the first time ..  I might go get the style sheet I used the loudest, that was the one that I had more luck with and still have a copy of it.
0
 
LVL 29

Author Closing Comment

by:coreybryant
ID: 39734754
Thanks, I can use this at least temporarily until we re-do them
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question