ASP.NET <Table> with DataGrid Control Need to get Rid of space between <td>

I have an ASP.NET page with DataGrid controls.  Each section is a datagrid control  I embedded the control in a <Table>.  Each Datagrid is in a <td> tag.  I am setting the Visible properties based on values that are being returned from a database.   So, the issue I'm having is that between EE and Family there is a control that is being hidden which is leaving a space.  Is there anyway to close that space up so it looks more symmetrical like the other tables?

example
LVL 2
CipherISAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle AbrahamsSenior .Net DeveloperCommented:
try Adding a class to your td (if not present)
and set the
border-collapse property to Collapse
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_js_border-collapse
0
CipherISAuthor Commented:
I have the collapse added.  The issues is that I have a datagrid there and the visible is set to false and its leaving that space there.  I would think that the collapse would have removed the space but doesn't seem like its doing it.
0
Kyle AbrahamsSenior .Net DeveloperCommented:
If you have the visible set to false nothing is actually rendered to the html page.  (Look in the source, you won't find your datagrid anywhere as opposed to display:none).  What about cellpadding?  And did you set the width's on the td's?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

CipherISAuthor Commented:
After getting frustrated I changed to Div's.  Still has the space.  It is displaying Div 3 and Div 4 even though there is no datagrid there.

Example3.jpg
Here is the source.

<div id="second">
            <table class="datagrid" cellspacing="0" rules="all" border="1" id="ctl00_cphBody_SelectionGrid1_dgEE" style="border-collapse:collapse;">
		<tr style="font-weight:bold;text-decoration:underline;height:20px;">
			<td align="center">EE</td><td align="center">EE (ER)</td>
		</tr><tr>
			<td align="center" style="height:25px;">$0.00</td><td align="center" style="height:25px;">$0.00</td>
		</tr><tr>
			<td align="center" style="height:25px;">$33.75</td><td align="center" style="height:25px;">$0.00</td>
		</tr>
	</table>
    </div>
    <div id="third">
            
    </div>
    <div id="fourth">
            
    </div>
    <div id="fifth">
            <table class="datagrid" cellspacing="0" rules="all" border="1" id="ctl00_cphBody_SelectionGrid1_dgFamily" style="border-collapse:collapse;">
		<tr style="font-weight:bold;text-decoration:underline;height:20px;">
			<td align="center">Family (EE)</td><td align="center">Family (ER)</td>
		</tr><tr>
			<td align="center" style="height:25px;">$0.00</td><td align="center" style="height:25px;">$0.00</td>
		</tr><tr>
			<td align="center" style="height:25px;">$89.25</td><td align="center" style="height:25px;">$0.00</td>
		</tr>
	</table>
    </div>
    <div id="sixth">
            <table class="datagrid" cellspacing="0" rules="all" border="1" id="ctl00_cphBody_SelectionGrid1_dgEE1" style="border-collapse:collapse;">
		<tr style="font-weight:bold;text-decoration:underline;height:20px;">
			<td align="center">EE + 1 (EE)</td><td align="center">EE + 1 (ER)</td>
		</tr><tr>
			<td align="center" style="height:25px;">$0.00</td><td align="center" style="height:25px;">$0.00</td>
		</tr><tr>
			<td align="center" style="height:25px;">$66.25</td><td align="center" style="height:25px;">$0.00</td>
		</tr>
	</table>
    </div>

Open in new window


css code
#first{
    margin: 0 auto;
    float: left;
    border-collapse: collapse;
    padding-right: 5px;
}

#second, #third, #fourth, #fifth, #sixth, #seventh, #eigth {
    margin: 0 auto;
    float: left;
    border-collapse: collapse;
    padding-right: 5px;
}

Open in new window


Any idea how to get the empty divs to collapse?  I need to get rid of those spaces.
0
CipherISAuthor Commented:
The source is the viewsource on the page.
0
CipherISAuthor Commented:
Oh - I need some space the problem is that for div 3 and div 4 when they are empty the padding is still showing up.  That was happening for the table too.
0
Kyle AbrahamsSenior .Net DeveloperCommented:
set the style ="display:none" . . . You can get a reference to it from the datagrid's parent.

OR

you can do :

   <div id="div_fourth" runat="server">
           
    </div>

then in your code behind
DataGrid4.Visible = false;
div_fourth.Visible = false;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CipherISAuthor Commented:
I used below as it was easiest.

<div id="div_fourth" runat="server">
            
    </div>

then in your code behind
DataGrid4.Visible = false;
div_fourth.Visible = false;

Open in new window


It made it worse

example
I even tried this.  Didn't work.

<script type="text/javascript">
	onload = function() {
        //Declare DIV elements in Array
        var myArray = ["second", "third", "fourth", "fifth", "sixth", "sevent", "eigth"];
        //Loop Through DIV elements
        for (var i in myArray) {
            //Get DIV
            var mydiv = document.getElementById(myArray[i]);
            //Check if DIV has Node
            if (!mydiv.hasChildNodes()) {
                //DIV is empty - Don't Display
                mydiv.style.display = NONE;
                mydiv.display = NONE;
            }
        }
    }
</script>

Open in new window

0
CipherISAuthor Commented:
Ok, I put it back.  After viewing everything it looks like the space is an IE issue.  It looks fine in the other browsers.  Thanks
0
Kyle AbrahamsSenior .Net DeveloperCommented:
You might be better off using the same technique with the tds.  But yeah, supporting multiple browsers is a pain in the neck when because they all render the same html differently.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.