Results 1 to 7 of 7

Thread: How to format my table/rows/cells to have same width as gridview cells

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    513

    How to format my table/rows/cells to have same width as gridview cells

    Hello: I have a form that contains a asp:Table and it contains 2 rows with 6 columns.

    Also on my form is a gridview. It contains one row with 6 columns. (see pic)

    I'd like to see if I can format both so that they appear to have the same over-all width and cell width too.

    I'd like to know if it's possible to do this in the source view - rather than programatically.

    Name:  Make Same.JPG
Views: 2076
Size:  64.9 KB

    In the pic, the top is the grid view and underneath is the table.

    Thank you,
    Proctor

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: How to format my table/rows/cells to have same width as gridview cells

    If i remember correctly there is an align=center property or text-align.Anyway something close to this.Check.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    513

    Re: How to format my table/rows/cells to have same width as gridview cells

    Hi sapator: thanks for the help. That took care of the header text - HorizontalAlign="Center" centered it up!!
    Now, I need to make the column widths match for both. Is there a way to do that?

    For the table, in each cell I tried this "Width="50"
    and in the gridview for each header I tried this: HeaderStyle-Width="50" and ItemStyle-Width="50"

    but when I view it in design mode, it looks like this (see pic). Name:  Make SameReva.JPG
Views: 2041
Size:  66.1 KB
    Thank you for your help.
    Proctor

  4. #4
    Frenzied Member brin351's Avatar
    Join Date
    Mar 2007
    Location
    Land Down Under
    Posts
    1,293

    Re: How to format my table/rows/cells to have same width as gridview cells

    VS design mode will not render the same as browser. For layout etc you'll need to test it in browser/s to see the actual result. Also to line the 2 tables up I'd view source in the browser to see HTML attributes/styles both tables have.
    The problem with computers is their nature is pure logic. Just once I'd like my computer to do something deluded.

  5. #5

    Thread Starter
    Fanatic Member
    Join Date
    Mar 2008
    Posts
    513

    Re: How to format my table/rows/cells to have same width as gridview cells

    Hi brin351 - thanks again for your inputs.

    I ran in the browser and here's what I see: Name:  comparison.JPG
Views: 1830
Size:  42.1 KB


    Here's the source for the gridview:
    Code:
       <div>
    	<table cellspacing="0" rules="all" border="1" id="MainContent_gridOutdoor" style="color:Black;width:60%;border-collapse:collapse;">
    		<tr style="color:Black;background-color:White;font-size:Small;font-weight:normal;">
    			<th align="left" scope="col">Product</th><th align="left" scope="col">Body Color</th><th align="left" scope="col">Power</th><th align="left" scope="col">Quantity</th><th align="left" scope="col">UnitPrice</th><th align="left" scope="col">Custom</th><th scope="col">&nbsp;</th><th scope="col">&nbsp;</th>
    		</tr><tr>
    			<td style="width:10px;"> 
                    <span id="MainContent_gridOutdoor_lblProduct_0">PML</span> 
                </td><td style="width:10px;"> 
                    <span id="MainContent_gridOutdoor_lblBodyColor_0" style="font-weight:normal;">BLACK</span> 
                </td><td style="width:10px;"> 
                    <span id="MainContent_gridOutdoor_lblPower_0" style="font-weight:normal;">115 W</span> 
                </td><td style="width:10px;"> 
                    <span id="MainContent_gridOutdoor_lblQuantity_0" style="font-weight:normal;">2</span> 
                </td><td style="width:10px;"> 
                    <span id="MainContent_gridOutdoor_lblUnitPrice_0" style="font-weight:normal;">2</span> 
                </td><td style="width:10px;"> 
                    <span id="MainContent_gridOutdoor_lblCustom_0" style="font-weight:normal;">2</span> 
                </td><td style="width:10px;"><a href="javascript:__doPostBack('ctl00$MainContent$gridOutdoor','Edit$0')" style="color:Black;">Edit</a></td><td style="width:10px;"><a href="javascript:__doPostBack('ctl00$MainContent$gridOutdoor','Delete$0')" style="color:Black;">Delete</a></td>
    		</tr>
    	</table>
    </div>
    And here's the code for the server table:
    Code:
    <table id="MainContent_tblPanel" rules="cols" border="1" style="border-style:Solid;width:60%;">
    	<tr id="MainContent_tblRow1">
    		<td id="MainContent_TableCell1" align="left" style="font-size:Small;width:10px;white-space:nowrap;">Product</td><td id="MainContent_TableCell2" align="left" style="width:10px;white-space:nowrap;">Body Color</td><td id="MainContent_TableCell3" align="left" style="width:10px;white-space:nowrap;">Power</td><td id="MainContent_TableCell4" align="left" style="width:10px;white-space:nowrap;">Quanity</td><td id="MainContent_TableCell5" align="left" style="width:10px;white-space:nowrap;">Unit Price</td><td id="MainContent_TableCell6" align="left" style="width:10px;white-space:nowrap;">Custom</td><td id="MainContent_TableCell7" align="left" style="width:10px;white-space:nowrap;">&nbsp;</td><td id="MainContent_TableCell8" align="left" style="width:10px;white-space:nowrap;">&nbsp;</td>
    	</tr><tr id="MainContent_TableRow2">
    		<td id="MainContent_TableCell9" align="left" style="white-space:nowrap;"><select name="ctl00$MainContent$ddProduct" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddProduct\',\'\')', 0)" id="MainContent_ddProduct" tabindex="1">
    			<option selected="selected" value="">Select</option>
    			<option value="PDL">PDL</option>
    			<option value="PML">PML</option>
    			<option value="PWL">PWL</option>
    
    		</select></td><td id="MainContent_TableCell10" align="left" style="white-space:nowrap;"><select name="ctl00$MainContent$ddBodyColor" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddBodyColor\',\'\')', 0)" id="MainContent_ddBodyColor" disabled="disabled" tabindex="2" class="aspNetDisabled">
    			<option selected="selected" value="">Select</option>
    
    		</select></td><td id="MainContent_TableCell11" align="left" style="white-space:nowrap;"><select name="ctl00$MainContent$ddPower" id="MainContent_ddPower" disabled="disabled" tabindex="3" class="aspNetDisabled">
    			<option selected="selected" value="">Select</option>
    
    		</select></td><td id="MainContent_TableCell12" align="left" style="white-space:nowrap;"><input name="ctl00$MainContent$txtQuantity" type="text" id="MainContent_txtQuantity" tabindex="4" /><span id="MainContent_rngQuantity" style="display:none;"></span></td><td id="MainContent_TableCell13" align="left" style="white-space:nowrap;"><input name="ctl00$MainContent$txtUnitPrice" type="text" id="MainContent_txtUnitPrice" tabindex="5" /><span id="MainContent_rngUnitPrice" style="display:none;"></span></td><td id="MainContent_TableCell14" align="left" style="white-space:nowrap;"><input name="ctl00$MainContent$txtCustom" type="text" id="MainContent_txtCustom" tabindex="6" /><span id="MainContent_rngCustom" style="display:none;"></span></td><td id="MainContent_TableCell15" align="left" style="white-space:nowrap;"><a id="MainContent_lbtnSubmit" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$lbtnSubmit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Submit</a></td><td id="MainContent_TableCell16" align="left" style="white-space:nowrap;"><a id="MainContent_lbtnCancel" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$lbtnCancel&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">Cancel</a></td>
    	</tr>
    </table>
    Do you see anything offhand that may help align the columns better?
    thanks again,
    Proctor

  6. #6
    Frenzied Member brin351's Avatar
    Join Date
    Mar 2007
    Location
    Land Down Under
    Posts
    1,293

    Re: How to format my table/rows/cells to have same width as gridview cells

    You can set the width of a table column by just setting the width of the first row td/th width, you don't have to set every one. From what I see all cell widths are 10px which is tiny and will not apply when the table width is 60%. So remove the table width and make the first row cell widths to suit - say 30px, you can then go back and set the table width based on the cells if needed.

    Personally I'd try applying a css class to both tables and remove all formatting on the tables tags like

    .myTable{
    border:1px solid black;
    }
    .myTable td{
    width:30px;
    }


    <table class="myTable" ....etc>
    The problem with computers is their nature is pure logic. Just once I'd like my computer to do something deluded.

  7. #7
    Fanatic Member
    Join Date
    Nov 2006
    Posts
    589

    Re: How to format my table/rows/cells to have same width as gridview cells

    I've done this loads of different ways. In the end I do it code behind.

    The header table is a gridview with a cssclass. I have a class to populate my 'Gridview Header Tables' with a dummy dataset that generates one row. (Without this, the gridview does not display.)

    The gridview that contains the records has the same css class as the 'header' gridview.

    Then, in the pre_render event of the gridview that contains the records - I set the width of both Gridviews and I set the columns of both gridviews to be a percentage - and set the first row of the header gridview to not display.

    This works like a charm. All my gridviews now have a separate header, I can set the height of a div that contains the one with the records and I get a scrollable gridview whose header stays still (used to this in css but it does not work anymore in IE - since version 9.0). The columns always align perfectly unless you do something daft like set a column to 2% and put a single word in it that forces it to be wider.

    I stick various controls in the header gridview and use them to fire events to do sorting of the gridview with the records etc.
    Last edited by Webskater; Jul 25th, 2013 at 07:20 AM. Reason: Make it clearer

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width