Solved

How can I extend my table the full length of my div?

Posted on 2015-02-17
2
69 Views
Last Modified: 2015-02-18
Check out the screenshot below:

screenshot
Pretty, ain't it?

I want to extend the table within the div all the way to the end so the table and the div are flush.

How?

Here's my code and CSS:

HTML:

<div style="height:370px; width:690px; margin-top:25px; display:inline-block; text-align:center;float:left;">
<table class="csv_sample"> 
<tr> 
<td>&nbsp;</td> 
<th style="border-top-right-radius:5px;border-top-left-radius:5px; background-color:blue; color:#ffffff; font-weight:bold; font-size:18pt; width:150px;">7 Day<br>KPIs</strong></div></th> 
<td bgcolor="blue"><div align="center"><strong><FONT size="+2" COLOR="#FFFFFF">RAN<br>IA%</strong></div></td> 
<td bgcolor="blue"><div align="center"><strong><FONT size="+2" COLOR="#FFFFFF">1-SEER%</strong></div></td> 
<td bgcolor="blue"><div align="center"><strong><FONT size="+2" COLOR="#FFFFFF">LC%</strong></div></td>
<th style="border-top-right-radius:5px;border-top-left-radius:5px; background-color:blue; color:#ffffff; font-weight:bold; font-size:18pt;">SIP MOU</strong></div></th> 
<td>&nbsp;</td>
</tr> 

Open in new window


CSS:

table.csv_sample {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:100%;
border: 1px solid #d7d4d4;
 }
 

Open in new window


What do you think?
0
Comment
Question by:brucegust
2 Comments
 
LVL 11

Accepted Solution

by:
N R earned 500 total points
ID: 40615835
Get rid of your filler <td>.

http://gallitin.com/experts-exchange/brucegust/brucegust.php

<div style="height:370px; width:690px; margin-top:25px; display:inline-block; text-align:center;float:left;">
<table class="csv_sample">
<tr>
<th style="border-top-right-radius:5px;border-top-left-radius:5px; background-color:blue; color:#ffffff; font-weight:bold; font-size:18pt; width:150px;">7 Day<br>KPIs</strong></div></th>
<td bgcolor="blue"><div align="center"><strong><FONT size="+2" COLOR="#FFFFFF">RAN<br>IA%</strong></div></td>
<td bgcolor="blue"><div align="center"><strong><FONT size="+2" COLOR="#FFFFFF">1-SEER%</strong></div></td>
<td bgcolor="blue"><div align="center"><strong><FONT size="+2" COLOR="#FFFFFF">LC%</strong></div></td>
<th style="border-top-right-radius:5px;border-top-left-radius:5px; background-color:blue; color:#ffffff; font-weight:bold; font-size:18pt;">SIP MOU</strong></div></th>
</tr>

Open in new window

0
 

Author Comment

by:brucegust
ID: 40616415
Well, there you go!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

758 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

20 Experts available now in Live!

Get 1:1 Help Now