ASP.NET

How to Fix <asp:Table> width? RSS

13 replies

Last post May 14, 2009 08:25 AM by MinimalTech

‹ Previous Thread|Next Thread ›

- Reply
MinimalTech

Member

239 Points

174 Posts
How to Fix <asp:Table> width?

Apr 22, 2009 08:52 PM|LINK
Hi! I have a small problem with my <asp:Table> and i want a suggestion for fixing it!

I have a) a test.aspx page and b) a test.aspx.vb page. In (a) page, i have an <asp:Table> like that below:
```
<asp:Table ID="Table1" runat="server">
</asp:Table>
```
In (b) page, i populate the "Table1" with Cells and Rows by code dynamically.

Lets say that the Table1 has 4 Rows and 40 Cells per Row.

Cell(0) has fixed width 300px (i give this by code). The other Cells has variable width which adjusted automatically by the

web browser and relates to the length of the text (usually are numbers like "1", "10", "2", ...).

When the total width of the rows does not exceeds the browser's width, all are fine.

But,

when the Table1's rows exceeds that width, the first Cell's width (width of Cell(0)) is compressed from 300px

to 100px or 150px, depends on the text's length. Also, i have word wrap....

Why is that?

I want my table to be able to exceed the 100% of the web browser's width and to achieve the 200% or 300%

(for ex. 3000px width) without the other cells to be compressed. I want fixed widths for the first cells...

How can i do that? (Please only in VB.Net code!)

Thank you!
table fix width
Please, mark this post as "Answer" if it helped you solve your problem.

MinimalTech.
- Reply
rtpHarry

All-Star

56620 Points

8958 Posts
Re: How to Fix <asp:Table> width?

Apr 22, 2009 10:25 PM|LINK
I think that asp.net is putting a width 100% in to your tables markup so it is automatically compressing itself.

I know that if the gridview gets to big then it just expands off the right hand side of the table.

Try changin the table to:
```
<asp:Table ID="Table1" runat="server" CssClass="WideTable">
</asp:Table>
```
and in a stylesheet put:

.WideTable
{
display:block;
width: auto;
}

Just guessing really you might have to play around a bit here.... could you post up the code so we can use it as a testbed?
- Reply
MinimalTech

Member

239 Points

174 Posts
Re: How to Fix <asp:Table> width?

Apr 24, 2009 01:39 PM|LINK
Hi rtpHarry!

I used the CSS Class you tell me (.WideTable) but i haven't the predictable results.. With that class,

my Table does not have GridLines in Columns (have only GridLines in rows - i assume this is by "display: block" property)

and my Table1's border is in 100% width while my cells is at 50-60% maximum in page.

As for the testbed, i give a sample of my code:
```
Private Sub test()


	Dim i, j As Integer
	Dim xRow As TableRow
  Dim xCel As TableCell
	

	Table1.GridLines = GridLines.Both
  Table1.BorderWidth = New Unit(5, UnitType.Pixel)
  Table1.CellPadding = 3
 Table1.CellSpacing = 3
 Table1.CssClass = "WideTable"


	For i=0 To 10


		xRow = New TableRow
	        xRow.CssClass = "title"
		

		For j=0 To 120


			xCel = New TableCell
		        xCel.CssClass = "mydata"
		        xCel.Font.Bold = True
		        xCel.Text = (i*j).ToString


			If j=0 Then
			        xCel.Width = New Unit(300, UnitType.Pixel)
			End If
        

			xRow.Cells.Add(xCel)


		Next


		Table1.Rows.Add(xRow)
	Next


End Sub
```
If you assign "For j=0 To 10", then you will see the first's cell's width to 150px. If you put it back from 10 Loops to 120,

then the width brokes......

I want ot fix it somehow!!

Thanks!
Please, mark this post as "Answer" if it helped you solve your problem.

MinimalTech.
- Reply
TUFAN01MAN

Participant

1208 Points

301 Posts

Re: How to Fix <asp:Table> width?

Apr 24, 2009 02:50 PM|LINK

use CSS (Style Sheet)

{

display:block;

width:auto;

}

that will solve the problem i guess.

Best Regards.

TUFAN01MAN
- Reply
shashiupc25

Member

156 Points

57 Posts

Re: How to Fix <asp:Table> width?

Apr 25, 2009 12:00 PM|LINK
Hi, You are using "mydata" CSS Class. So make few changes in this as .mydata{ ---- -- Your code ---- width:300px; display:block; }

Shashikant Maurya
- Reply
MinimalTech

Member

239 Points

174 Posts

Re: How to Fix <asp:Table> width?

Apr 25, 2009 10:32 PM|LINK

TUFAN01MAN, if you read my previous post carefully, you will see that i have used the Css Class "WideTable" that rtpHarry suggested me.

The "WideTable" Class, has the same contents as yours and does not produce the preferred result.

If you Drag and Drop a new ASP Table to your project, and then at the "Page Load" event write my code in test() sub routine, you will see

my problem.

Shashiupc25, as about your CSS optimization "width:300px; display:block;" you are right!!

I can't believe that the "width" statement in CSS Class has these results BUT,

your solution works perfect only with FireFox, NOT with IE!!

With IE, the problem keeps going!

Also, i have an another little style problem!!

In Firefox, my Table1 with GridLines = Both works perfect. The gridlines are black and in normal size.

But in IE, the GridLines are white (!) and large!

Why? How can i define the size and the color of the GridLines of my Table1?

Is this a CSS setting?

Thank you all very much!!

Please, mark this post as "Answer" if it helped you solve your problem.

MinimalTech.
- Edited by MinimalTech on Apr 25, 2009 10:34 PM
- Reply
MinimalTech

Member

239 Points

174 Posts

Re: How to Fix <asp:Table> width?

Apr 26, 2009 08:13 PM|LINK

Anyone guys???

Please, mark this post as "Answer" if it helped you solve your problem.

MinimalTech.
- Edited by MinimalTech on Apr 27, 2009 12:04 PM
- Reply
MinimalTech

Member

239 Points

174 Posts

Re: How to Fix <asp:Table> width?

Apr 27, 2009 12:09 PM|LINK

Please, help!

How to fix the Width in IE?

Also, about my GridLines Style problem,

In Firefox, my Table1 with GridLines = Both works perfect. The gridlines are black and in normal size.

But in IE, the GridLines are white (!) and large!

How can i define the size and the color of the GridLines of my Table1?

Thank you very much!!

Please, mark this post as "Answer" if it helped you solve your problem.

MinimalTech.
- Reply
Qin Dian Tan...

All-Star

113532 Points

12480 Posts

Microsoft

Re: How to Fix <asp:Table> width?

Apr 28, 2009 04:07 AM|LINK

Hi MinimalTech,

Have a look at these two links about the difference between IE and FF in width. Hope they help.

http://www.webmasterworld.com/forum83/7807.htm

http://www.sanctifiedstudios.com/internet-explorer-min-and-max-width-bug-fix/

Thanks,

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contactmsdnmg@microsoft.com.
Microsoft One Code Framework
- Reply
MinimalTech

Member

239 Points

174 Posts

Re: How to Fix <asp:Table> width?

Apr 28, 2009 09:13 AM|LINK

Thank you Qin Dian Tang for your articles, but they didn't help me at all!

Please, all i want is this:

I want all the Table Cells to have constant witdh.

--> For example, the first Cell of the row to have 150px width (always) (don't worry about the text, text's width is about 80-100px long...)

--> and the Cells after the first, to have always width 20px (they includes numbers from 0 to 9 as text).

That scenario works fine if the Cells of the table does not exceeds the browsers window.

But if i put (dynamically - by code) more Cells (about 60 - 150 Cells) that exceeds the browsers window, then the Cells are compressed to

different widths and does not keeps the default width .....

I want to fix it somehow... What i'm doing wrong?

In code, i set xCel.Width = New Unit (20, UnitType.Pixel) and in CSS Class i set:

width: 20px;
white-space: nowrap;
visibility: visible;

I have made a lot of test with display: block, width: auto, margin-right, margin-left, but i can't fix it!!

Any help it would be appreciated very very much!!!!!

Please, mark this post as "Answer" if it helped you solve your problem.

MinimalTech.