Stylesheets - row width = div width

Author

row width = div width

Ward Germonpré

2006-04-12, 6:52 am

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

2006-04-12, 6:52 am

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é

2006-04-12, 6:47 pm

Johannes Koch <koch@w3development.de> wrote in news:443cd923$0$11086
$892e7fe2@authen.yellow.readfreenews.net:

> Ward Germonpré wrote:
>
>
> 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é

2006-04-12, 6:47 pm

"Ward Germonpré" <kingalbertII@forpresident.com> wrote in
news:Xns97A383E191047kingalbertIIforpresi@195.130.132.70:

> Johannes Koch <koch@w3development.de> wrote in news:443cd923$0$11086
> $892e7fe2@authen.yellow.readfreenews.net:
>
>
> 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

2006-04-12, 6:47 pm

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.)