row width = div width

[Ward Germonpré]

Hello,

I have a <table> within a <div> that I populate with a js array. An
eventhandler changes the data displayed.

I'd like the row width to remain equal to the div width, although the
contained data usually isn't wide enough the stretch to div width.
thanks for any help

Ward

[Johannes Koch]

Ward Germonpré wrote:

I have a <table> within a <div> that I populate with a js array. An
eventhandler changes the data displayed.

I'd like the row width to remain equal to the div width, although the
contained data usually isn't wide enough the stretch to div width.

table {
width: 100%;
}

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Ward Germonpré]

Johannes Koch <ko**@w3development.de> wrote in news:443cd923$0$11086
$8*******@authen.yellow.readfreenews.net:

Ward Germonpré wrote:

I have a <table> within a <div> that I populate with a js array. An
eventhandler changes the data displayed.

I'd like the row width to remain equal to the div width, although the
contained data usually isn't wide enough the stretch to div width.

table {
width: 100%;
}

I know that should work but it doesn't.
The table is nested like so :

<div id="content><div id="subcontent"><table id="resultaattbl"> ...
Below is part of my stylesheet that pertains to the above, and FF is my
targetbrowser :
div#content {
position:fixed;
margin-top:40px;
margin-left:170px;
width:780px;
height:550px;
border:1px solid gray;
padding:0px;
}

div#subcontent {
position:fixed;
margin-top:20px;
margin-left:0px;
width:780px;
height:600px;
padding:0px;
/*overflow: auto;*/
}

table#resultaattbl {
width:100%;

}

table#resultaattbl tr{
padding: 5px;
background-color:#DDDDDD;

}

table#resultaattbl td{
padding: 5px;
}
table#resultaattbl tr:hover {
background-color: #BA2A12;
color:#FFFFFF;
}
thanks for your help,

Ward

[Ward Germonpré]

"Ward Germonpré" <ki**********@forpresident.com> wrote in
news:Xn**********************************@195.130. 132.70:

Johannes Koch <ko**@w3development.de> wrote in news:443cd923$0$11086
$8*******@authen.yellow.readfreenews.net:

Ward Germonpré wrote:

I have a <table> within a <div> that I populate with a js array. An
eventhandler changes the data displayed.

I'd like the row width to remain equal to the div width, although the
contained data usually isn't wide enough the stretch to div width.

table {
width: 100%;
}

I know that should work but it doesn't.
The table is nested like so :

<div id="content><div id="subcontent"><table id="resultaattbl"> ...
Below is part of my stylesheet that pertains to the above, and FF is my
targetbrowser :
div#content {
position:fixed;
margin-top:40px;
margin-left:170px;
width:780px;
height:550px;
border:1px solid gray;
padding:0px;
}

div#subcontent {
position:fixed;
margin-top:20px;
margin-left:0px;
width:780px;
height:600px;
padding:0px;
/*overflow: auto;*/
}

table#resultaattbl {
width:100%;

}

table#resultaattbl tr{
padding: 5px;
background-color:#DDDDDD;

}

table#resultaattbl td{
padding: 5px;
}
table#resultaattbl tr:hover {
background-color: #BA2A12;
color:#FFFFFF;
}
thanks for your help,

Ward

Found it !!

This needed to change :
div#subcontent {
position:fixed;
thanks for seeding,

Ward

[Johannes Koch]

Ward Germonpré wrote:

<div id="content><div id="subcontent"><table id="resultaattbl"> ...

Below is part of my stylesheet that pertains to the above, and FF is my
targetbrowser :

div#content {
position:fixed;
margin-top:40px;
margin-left:170px;
width:780px;
height:550px;
border:1px solid gray;
padding:0px;
}

div#subcontent {
position:fixed;
margin-top:20px;
margin-left:0px;
width:780px;
height:600px;
padding:0px;
/*overflow: auto;*/
}

BTW, div#subcontent block height (600px + 20px = 620px) does not fit
into div#content (550px)

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)