-
Jul 17th, 2013, 03:22 PM
#1
Thread Starter
Fanatic Member
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.
In the pic, the top is the grid view and underneath is the table.
Thank you,
Proctor
-
Jul 17th, 2013, 04:20 PM
#2
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 17th, 2013, 04:45 PM
#3
Thread Starter
Fanatic Member
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).
Thank you for your help.
Proctor
-
Jul 17th, 2013, 09:21 PM
#4
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.
-
Jul 22nd, 2013, 01:29 PM
#5
Thread Starter
Fanatic Member
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:
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"> </th><th scope="col"> </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;"> </td><td id="MainContent_TableCell8" align="left" style="width:10px;white-space:nowrap;"> </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("ctl00$MainContent$lbtnSubmit", "", true, "", "", 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("ctl00$MainContent$lbtnCancel", "", true, "", "", false, true))">Cancel</a></td>
</tr>
</table>
Do you see anything offhand that may help align the columns better?
thanks again,
Proctor
-
Jul 22nd, 2013, 08:24 PM
#6
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.
-
Jul 25th, 2013, 07:17 AM
#7
Fanatic Member
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|