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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.