CSS - Css Table For Xml Data

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 & 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?

Any suggestions will be greatly appreciated!

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

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
Code:

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

I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well.

Here is a setup of my table
Code:

<div id="Content">
        <p class='instructions'>Click a column header to sort the table.</p>
        <div spry:region="jdmba">
          <div spry:state="loading" class="loading">Please wait while alumni data loads&hellip;</div>
          <table class="spry" cellspacing="0" cellpadding="0">
            <tr>
              <th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
              <th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
              <th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
              <th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
            </tr>
          </table>
          <div class="Overload">
            <table class="spry" cellspacing="0" cellpadding="0">
              <tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
                <td width="108px">{last}</td>
                <td width="106px">{first}</td>
                <td width="269px">{account}</td>
                <td width="66px">{state}</td>
                <td width="82px">{hls_year}</td>
                <td width="82px">{hbs_year}</td>
              </tr>
            </table>
          </div>
        </div>

Here is my CSS file
Code:

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#News a:link {
	color: #00F;
}
#News a:hover {
	color: #00F;
	text-decoration: underline;
}




body {
	background: #000 repeat;
}




#wrap {
	background: #000;
	width: 900px;
	border: thick solid #9C0029;
	float: left;
	height: auto;
	padding: 0px 0px 1em;
	margin-top: 2%;
	margin-left: 10%;
}
#footer {
	font: bold small/50px Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #9C0029;
	text-align: center;
	height: 50px;
	width: 850px;
	margin-left: 25px;
}

#Header {
	background: #8F001C url(../images/banner.jpg) no-repeat center center;
	width: 850px;
	height: 150px;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 25px;
}
h1 {
	font: normal 18px Arial, Helvetica, sans-serif;
	color: #000;
	text-align: left;
}
h2 {
	font: small Georgia, "Times New Roman", Times, serif;
	color: #333;
	text-align: justify;
}
h3 {
	font: normal medium "Times New Roman", Times, serif;
	color: #FFF;
}
h4 {
	font-size: small;
	color: #333;
	text-align: left;
}
.banners {
	background: #FFF0B2;
	width: auto;
	height: auto;
	font: 18px Arial, Helvetica, sans-serif;
	padding-top: .5em;
	padding-bottom: .5em;
	text-indent: 10px;
}
.Content {
	font: 14px/normal Georgia, "Times New Roman", Times, serif;
	text-align: justify;
	display: block;
	padding: 2em 3em 3em;
}
.Content a:link {
	color: #00F;
}
.Content a:hover {
	color: #00F;
	text-decoration: underline;
}
.Content a:visited {
	color: #00F;
}

#inner_body {
	background: #FFF;
	height: auto;
	width: 800px;
	margin-top: 0px;
	margin-left: 50px;
	padding-top: 0.5em;
	padding-bottom: .5em;
}
#inner_border {
	margin: 0em auto auto;
	border: thin solid #8E887C;
	width: 775px;
	padding: 1em 0em 0em;
}
#nav_bar {
	height: 3em;
	width: 100%;
	margin-left: 0%;
	text-align: center;
}


#Content {
	height: auto;
	width: 95%;
	padding: 0em 0% 5em;
	margin: 2.5% 2.55% 2%;
	text-align: left;
	font-family: Verdana;
}
#nav {
	height: auto;
	width: 20em;
}

#News {
	margin-left: 2px;
	height: 30%;
	background: #FFF0B2;
	padding: 3%;
}
#News a:visited {
	color: #00F;
}

.Overload
{
	height: 208px;
	overflow: auto;
}

.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
	font-family: Verdana;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
}

.instructions {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-bottom:8px;
}

.loading {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-top:0px;
	margin-bottom:8px;
	color:#900;
}

table.spry th {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry td {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px;  }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }

I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black.

Any ideas?

Thanks!

I have a textarea in a <td>which asks for users for some description.

If users enter text and don't use any space or enter, the
width of the table gets bigger and bigger and damages the pages
design.


What can I add (to td.fixed_width css for example )to make the line
break after the width of the table is reached???


There is a solution that I put a div in td and then
Code:

#desc {
	width:"100%";
	width::fixed;
	overflow:scroll;}

but it is not exactly what I want

hi every one...

How can I display static headers in a table, so that headers remain visible while user scrolls the table body?

This is not working in IE 7 any working example please

2.
iam having a column which holds data around some 100 to 200 characters...
by default i want to display some 50 characters and rest of the characters can be viewed by moving the column...

if this is possible let me know how to do it with some sample code......i dont know much about CSS

3. One more problem iam facing is with the number of columns displayed in the table.

I have to display around 15 to 20 columns in a table...
with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page)

I need a fixed table width and height and also fixed column width and height.....
Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns)

Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked.

Is there a way to get this to happen with out changing the size of the cell?

I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table.

I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
  <body>
    <table>
      <tbody>
        <tr>
          <td>
           1<br>2<br>3<br>4<br>5<br>
          </td>
          <td style="background: blue;">
            <table style="height: 100%; background: red;">
              <tbody>
                <tr>
                  <td style="vertical-align: bottom">
                    Test
                  </td>
                </tr>
              </tbody>
            </table>
          </td>          
        </tr>      
      </tbody>
    </table>
  </body>
</html>

--------------------------------------------------------------------------------

Hello,

Not exactly sure where to post this question... but:
I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height?

Thanks in advance!

I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically.

Thanks for reading.

Hi,

CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this:

Code:

<table id="Description">
      <tr><th class="title">Text</th></tr>
      <tr><td class="data"><div class="ggcode">Text</div></td></tr>
    </table>

So I've been formatting it like this:

Code:

div#Main
table#Description
    .title {
    border-color:#F0E68C;
    background-color:#F0E68C; }
div#Main 
table#Description
    td.data {
    border-color:#F0E68C;
    background-color:#F0E68C; }

However the last table is like this:

Code:

    <table id="recentPosts">
      <tr>
        <th class="title">
          Recent Forum Posts
        </th>
      </tr>
              <tr>
          <td>
            <table class="data">
              <tr>
                <th>Topic</th>
                                  <th>User</th>
                                                  <th>Posted At</th>
                              </tr>
              <tr>
  <td class="clickable forumTitle"><a href="link">Text></td>
      <td class="username">Text</td>
        <td class="date">Text12/04/2009 03:25 PM</td>
  </tr>
<tr>
  <td class="clickable forumTitle"><a href="link">Text</a></td>
      <td class="username">Text</td>
        <td class="date">Text</td>
  </tr>
            </table>
          </td>
        </tr>
          </table>

I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this?

Thanks in advance

hi all ! Im having a little bit of problem to make a header and the table body match in a correct way.

My header is declared as <table align="center" class="style36" id="header">

and the CSS controlling it is

Code:

table.style36 {
        width: 1000px;
		vertical-align:middle;
      }
	  .style36 td{
		  font-family: Arial, Helvetica, sans-serif;
		  font-size: 12px; 
		  vertical-align:middle;
		
		  }

And the table wich is declared as

Code:

<div class="scrollingDiv">	
            <table border="1"  bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >

And the CSS controlling it

Code:

 
  div.scrollingDiv {
        height:420px; 
        overflow:scroll; 
        vertical-align:middle;
		width:1024px;
	  }

table.style13 {
        width: 1000px;
		vertical-align:middle;
      }
      /* Since the table has a class of style13, all td elements under that style can be
          selected as below...  no need for more style definitions...
       */
      .style13 td {
        vertical-align:middle;
		
      }
      .style13 th {      
        vertical-align:middle;
	  }
	  

My first idea was to declare a width for each td, something like:

Code:

 <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
                  <td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td> 

AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated.

Thanks!

Hi all, what i want is to customise the borders of a table...
i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>)

is there a way that css can manipulate the borders of a table?
i tried using this css:

.nmhead {
border-color:#cccccc;
border-top:border-top-style:none;
border-left:border-left-style:none;
border-right:border-right-style:double;
border-bottom:border-bottom-width:5px;
}

and then in the table doing this:
<td class='nmhead'>

but it didnt work (attached is what i want it to look like)

any ideas?

I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information.

I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what).

URL

The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background.

Could someone solve this, or alternatively reccommend another way.

Hi! I'm wondering how to you convert this table data to a tableless data??

Code:

   <table>
    <tr>
     <td>1-Part Receipt Paper (8100 per box)</td>
     <td>$77.55</td>
    </tr>
    <tr>
     <td>2-Part Receipt Paper (4800 per box)</td>
     <td>$90.75</td>
    </tr>
   </table>

Thanks...

Edit: That confirm to W3.org standard and right/left justify??

Apologies but this question falls into a number of camps. I am generating dynamic data via PHP calls to a MySQL database. The problem is that some of the data returned requires formatting.

For instance, dynamic list boxes are too wide because some strings returned are very long.

Secondly, some dynamic text is also too long and it is extending my tables beyond what I would like.

One solution is to run SELECT LEFT queries to truncate the data but this is not very elegant since this is a formatting issue and I prefer not to introduce queries to format data. Is there a way of:

i) Specifyin maximum list menu widths in CSS

ii) Specifying the maximum table with, regardless of length of a text string, or maybe to trim the dynamic string to a maximum number of characters.

Thanks

Hi,

I am trying to create a dropdown menu at present but for some reason there is a large gap between each row of data on this menu. I have tried everything but cannot work out how to remove these gaps.

Any help greatly appriciated.

Thanks,
David