Solved

Styling Tables and Cells

Posted on 2013-12-21
3
289 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 53

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

630 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