Solved

Styling Tables and Cells

Posted on 2013-12-21
3
282 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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks, I can use this at least temporarily until we re-do them
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

763 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now