Home » Asp.netRSS

How to Control each cells width and height of a Table ?

Hi,

I want to fix the size of each cells of a table .

for that i used Style like this:

<td style="width:10px;height:10px">

contents

</td>

But it seems that there is no any effect of applying these settings.How can  i set its width and height. It seems that it purely depends on the contents of cells.

Now, if suppose there are two rows,

<tr id='r1'>
<td id='d1'>

content of size 10px
</td>
<td id='d2'>
content of size 10px
</td>
</tr>

<tr id='r2'>

<td id='d3'>
Content of size 400px
</td>

<td id='d4'>

content of size 20px
</td>

</tr>



 

Then cell of id 'd1' will get a size of 400px ,since its just below cell is of size 400px. I want to fix its size. Is that possible ?

 

 

8 Answers Found

 

Answer 1

shyam_oec:
I want to fix  its size. Is that possible ?

Table cell size  extends by the maximum width  of the cells. That's the default behavior of the table.

If you have few cells  with 10 px width and few cells with 100px width, table  cell width will be 100px.

I did not understand what you meant by fixed size, but you can wrap the contents  in a div with fixed width and keep in in a table cell.

 

Answer 2

sansan:
Table cell size  extends by the maximum width  of the cells.
 

 

ya, i agree, that cell's size will increase according to its contents  size.

Ok, please copy paste this code in notepad and view it in browser.

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>
a
</TD>
<TD>
abcdefghijklmnop
</TD>
</TR>
<TR>
<TD>
vbvbvbvbvbvbvbvbvbvbvbvbvbvbvbfgggfgfgfgfgfgfgf
</TD>
<TD>
hjhjhjhjhjhjhj
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


 

View it in browsr, i want that first cell, that contains "a" should not be so large as cell  which is just below that cell. I want to fix  cell's width, here cell that contains "a" .

Is it now clear Sir ?

 

Answer 3

shyam_oec:
i want that first cell, that contains "a" should not be so large as cell  which is just below that cell
 

You cannot.

all Table cells  in a column will all have the same width.  The will be as wide as the widest cell in the column.

 

 

 

Answer 4

shyam_oec:
i want that first cell, that contains "a" should not be so large as cell  which is just below that cell. I want to fix  cell's width, here cell that contains "a" .

Based on what you are saying, it is not possible with table. Not sure if you are trying to do this.

a abcdefghijklmnop
vbvbvbvbvbvbvbvbvbvbvbvbvbvbvbfgggfgfgfgfgfgfgf hjhjhjhjhjhjhj

Source:

<html>
<head>
    <title></title>
</head>
<body>
    <table border="1">
        <tr>
            <td>
                <table >
                    <tr>
                        <td>
                            a
                        </td>
                        <td>
                            abcdefghijklmnop
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table >
                    <tr>
                        <td>
                            vbvbvbvbvbvbvbvbvbvbvbvbvbvbvbfgggfgfgfgfgfgfgf
                        </td>
                        <td>
                            hjhjhjhjhjhjhj
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
 

Answer 5

sansan:

Based on what you are saying, it is not possible with table. Not sure if you are trying to do this.

 

Thanks a lot. I was looking for that .That is interesting!!!

 

Answer 6

sansan:

I did not understand what you meant by fixed size, but you can wrap the contents  in a div with fixed width  and keep in in a table  cell.

 

One more thing,

Look this code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1"  >
<TR>
<TD style="width:50px;" >
a
</TD>
<TD>
abcdefghijklmnop
</TD>
</TR>
<TR>
<TD style="width:50px;">
<div  style="word-wrap: break-word;width:50px;">
vbvbvbvbvbvbvbvbvbvbvbvbvbvbvbfgggfgfgfgfgfgfgf
</div>
</TD>
<TD>
hjhjhjhjhjhjhj
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


 

As suggested by you, i kept contents in a div, and wrapped. Contents are wrapped, but cell's width is as it is. Why so ?Can i now reduce the size  of Cell, since its contents are of small width.

 

Answer 7

shyam_oec:
i kept contents  in a div, and wrapped

What I suggested is wrapping up the content  in a div with fixed width  for the large text. For example, if the second row first cell  text is like this

sampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletext

First cell will extend all the way till the end of sample text. That's why I suggested keeping that changing text in a div.

shyam_oec:
Contents are wrapped, but cell's width is as it is. Why so ?

When you are using table, you cannot take control  of independent cells  as such. That's the conclusion from previous posts. Only option that I can think of is using nested tables like I posted in my previous reply.

shyam_oec:
Can i now reduce the size  of Cell, since its contents are of small width.

It is not possible to do with what you have now. Try using nested tables and then you compress the cell a as it will be an independent cell and does not depend on the cell containing the large text.

Is that clear.

 

Answer 8

sansan:

Is that clear.

 

Ya ,Clear Sir.

 
 
 

<< Previous      Next >>


Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter