PDA

View Full Version : Problem with data table widths that expand beyond the screen view : using CSS layout



Xtine
Nov 9th, 2006, 05:03 PM
Hello,

I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF 7 IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table. Any thoughts?

Below are snippets of code from the css code and html code:

CSS


body {
margin: 0px 20px 0px 20px;
background-color: #069;
background-image: url(../images/bkgd.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #036;
}

#container {
width: 100%;
margin: 0px auto 0px auto;
background-color: #DDD;
}

...

#content {
background-color: #FFF;
padding: 20px;
margin-left: 190px;
}

...



#content_main table.data {
margin: 0px 0px 0px 0px;
border: 1px solid #369;
background-color: #FFF;
}

#content_main table a.nobrdr {
border-bottom: none;
}

#content_main table.data th {
height: 20px;
color: #E8E8E8;
text-align: center;
background-color: #369;
border: 1px solid #2C537D;
text-transform: uppercase;
}

#content_main table.data td {
height: 25px;
padding: 3px;
border: 1px solid #CCC;
vertical-align: top;
line-height: 15px;
}


HTML


<table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data">
<tr>
<th scope="col" width="5%" nowrap>fund</th>
<th scope="col" width="6%" nowrap>bsli</th>
<th scope="col" width="4%" nowrap>reg</th>
<th scope="col">title</th>
<th scope="col" width="9%" nowrap>projcode</th>
<th scope="col" width="7%" nowrap>cip</th>
<th scope="col" width="4%" nowrap>afc</th>
<th scope="col" width="10%" nowrap>avail</th>
<th width="10%" nowrap scope="col">oblig</th>
<th width="10%" nowrap scope="col">oblig</th>
<th width="10%" nowrap scope="col">oblig</th>
<th width="10%" nowrap scope="col">oblig</th>
<th scope="col" width="10%" nowrap>unoblig</th>
<th scope="col" width="5%" nowrap>&nbsp;</th>
</tr>
<tr>
<td scope="row" align="center" nowrap>682A</td>
<td align="center" nowrap>1A01A1</td>
<td align="center" nowrap>HQ</td>
<td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td>
<td align="center" nowrap><a href="#">25570427</a></td>
<td align="center" nowrap>W020200</td>
<td align="center" nowrap>140</td>
<td align="right" nowrap>000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="right" nowrap>000,000</td>
<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
</tr>
<tr>
<td scope="row" align="center" nowrap>682A</td>
<td align="center" nowrap>1A01A1</td>
<td align="center" nowrap>HQ</td>
<td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td>
<td align="center" nowrap><a href="#">25570427</a></td>
<td align="center" nowrap>W020200</td>
<td align="center" nowrap>3J0</td>
<td align="right" nowrap>000,000</td>
<td align="right" nowrap>000,000</td>
<td align="right" nowrap>000,000</td>
<td align="right" nowrap>000,000</td>
<td align="right" nowrap>000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
</tr>
<tr>
<td scope="row" align="center" nowrap>682A</td>
<td align="center" nowrap>1A01A1</td>
<td align="center" nowrap>TC</td>
<td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td>
<td align="center" nowrap><a href="#">25570427</a></td>
<td align="center" nowrap>W020200</td>
<td align="center" nowrap>4C0</td>
<td align="right" nowrap>000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="right" nowrap>000,000,000</td>
<td align="right" nowrap>000,000</td>
<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
</tr>
</table>

Xtine
Nov 15th, 2006, 08:36 PM
Well after days of pulling my hair out, I found a (simple) solution! :thumbsup: I thought I would post just in case anyone else may have this issue or may have a better suggestion. (for now I'm doing the happy dance!)

I placed a div around my data table and gave it the following style:


#data {
width: 100%;
overflow: auto;
}