|
CSS - Help With Table Header And Dynamic Table
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! Similar Tutorialshi 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) -------------------------------------------------------------------------------- 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! Hi I'm trying to CSS a dynamic table using Dreamweaver CS4 the problem i have is to set my css i have to have 2 rows 1 odd 1 even and dreamweaver only gives me 1. I've added a second row which just remains blank. Can anyone help Heres my html / PHP: <div class="donation_table"> <table> <thead> <tr> <th>FAMILYNAME</th> <th>FAMILYCODE</th> <th>DONATION</th> <th>DATE</th> </tr> </thead> <?php do { ?> <tbody> <tr> <td><?php echo $row_Recordset3['FAMILYNAME']; ?></td> <td><?php echo $row_Recordset3['FAMILYCODE']; ?></td> <td>$<?php echo $row_Recordset3['DONATION']; ?></td> <td><?php echo $row_Recordset3['DATE']; ?></td> </tr> <tr class="rowline"> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <?php } while ($row_Recordset3 = mysql_fetch_assoc($Recordset3)); ?> </table> </div> And heres my PHP code $maxRows_Recordset3 = 25; $pageNum_Recordset3 = 0; if (isset($_GET['pageNum_Recordset3'])) { $pageNum_Recordset3 = $_GET['pageNum_Recordset3']; } $startRow_Recordset3 = $pageNum_Recordset3 * $maxRows_Recordset3; mysql_select_db($database_MafiaLive, $MafiaLive); $query_Recordset3 = "SELECT FAMILYNAME, FAMILYCODE, DONATION, `DATE` FROM donations ORDER BY DONATION DESC"; $query_limit_Recordset3 = sprintf("%s LIMIT %d, %d", $query_Recordset3, $startRow_Recordset3, $maxRows_Recordset3); $Recordset3 = mysql_query($query_limit_Recordset3, $MafiaLive) or die(mysql_error()); $row_Recordset3 = mysql_fetch_assoc($Recordset3); if (isset($_GET['totalRows_Recordset3'])) { $totalRows_Recordset3 = $_GET['totalRows_Recordset3']; } else { $all_Recordset3 = mysql_query($query_Recordset3); $totalRows_Recordset3 = mysql_num_rows($all_Recordset3); } $totalPages_Recordset3 = ceil($totalRows_Recordset3/$maxRows_Recordset3)-1; Thank you Daniel I have managed to make a work around for the nasty old table, but I am having a problem with my text's vertical align in the header part of the code. You can see what it is doing he www.crxgames.com/spade/portal/profile.php?mode=view Here is the css: Code:
/*CSS: FAKING THE TABLE :)*/
.css_table {
border: 1px solid #2555B4;
background-color: #FFFFFF;
margin: 0px;
}
.css_table ul {
margin: 0px; padding-top: 1px; padding-bottom: 1px; padding-left: 1px; LIST-STYLE-TYPE: none;
}
.css_table li {
margin-left: 0px;
}
.css_table ul li {
margin-left: 0px;
}
.css_table_header {
background-color: #4382C0;
background-image: url(images/cellpic_th.gif);
height: 24px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
.css_table_footer{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dashed;
border-top-color: #8BA5BE;
border-right-color: #8BA5BE;
border-bottom-color: #8BA5BE;
border-left-color: #8BA5BE;
background-color: #ECE9D8;
background-image: url(images/cellpic_td.gif);
background-position: bottom;
background-repeat: repeat-x;
height: 24px;
padding-bottom: 0px;
padding-top: 0px;
}
and here is the html Code: <div class="css_table"> <div class="css_table_header"> Boo! Did it work?</div> <ul> <li>sadf</li> <li>asdfasdf</li> </ul> <div class="css_table_footer"> </div> </div> Does anyone know how to fix this? In this table, the right column is displaying correct, the left column has an odd space appearing at the top. Here's the page www.scarboroughrocks.com/inthenews.htm I don't see where that space is coming from at the top of the left column. Here is the code: Code: <table width="531" border="1" cellpadding="2">
<tr>
<td width="251">
<h4 align=center>NEWS ARTICLES</h4>
<p><a href="http://www.worldnetdaily.com/news/article.asp?ARTICLE_ID=40550">"Joe Scarborough is one feisty guy"</a> - World Net Daily - 9/21/04 </p>
<p><a href="http://www.teenspeaknews.com/vol4/issue4/issues/new_age_conservatism.html">New Age Conservatism</a> - TeenSpeakNews - Vol.4, Issue4</p>
<p><a href="http://www.washingtonpost.com/ac2/wp-dyn?pagename=article&node=&contentId=A29236-2001Jul20">"Captive Parents: Scarborough shows support"</a> - Washington Post - 6/22/01</p>
<p> </p>
<h4 align=center>INTERVIEWS</h4>
<p><a href="http://www.nationalreview.com/interrogatory/scarborough200403290839.asp">"Cuppa Joe"</a> - 3/29/04- National Review Online </p>
<p> </p>
<p><a href="http://www.chuckbaldwinlive.com/real2.html">Chuck Baldwin Radio Show</a> - 5/24/97 </p></td>
<td width="260">
<h4 align=center>COLUMNS</h4>
<p><a href="http://www.jewishworldreview.com/0804/scarborough_archives.asp">Jewish World Review Archive </a> -4/03-9/04- awesome set, 150 in all</p>
<p><a href="http://www.justgivemesometruth.org">Florida Sun - "From The Pub"</a>- Must Read!! From the newspaper he created, of a more personal nature </p>
<p><a href="http://www.townhall.com/columnists/joescarborough/archive.shtml">TownHall.com</a> -5/03-7/03 - Other great columnists on this site too </p>
<p><a href="http://www.learnathome.com/506998.html?view=print">Crosswalk.com</a> - On human rights</p>
<h4 align=center>SPEECHES</h4>
<p><a href="speeches.htm#farewell">Farewell Speech to Congress</a> - 9/5/01</p>
<p><a href="speeches.htm#cuba">Human Rights in Cuba</a> - 4/24/01 </p>
<p><a href="speeches.htm#balancingbudget">Balancing the Budget</a> - 3/2/99</p>
<p><a href="speeches.htm#freeenterprise">The Power of Free Enterprise</a> - 3/5/98</p>
<p><a href="speeches.htm#castro">On the Castro Murders</a> - 2/27/96 </p>
<h4 align=center>TRANSCRIPTS</h4>
<p><a href="http://www.msnbc.msn.com/id/3719710/">"Scarborough Country" Transcripts</a> - Scroll to the bottom of that page to find transcripts from the previous week. </p>
<p>See the <a href="scarboroughcountry.htm">Show</a> page for older transcripts. </p></td>
</tr>
</table>
Thanks ya'll. I've been over this one so many times, and can't figure why it's behaving so strangely. Hi there, I have a table which displays some links in columns, but I cannot work out how to convert it into CSS. This is the table code: PHP Code: <table width="100%" border="0" cellpadding="2" cellspacing="0" class="normal_12_blue"> {section name=row loop=$row_submenu_id} <tr> <td><a href="{$row_submenu_link[row]}" >{$row_submenu_name[row]} </a></td> {section name=col loop=$col_submenu_id[row]} <td><a href="{$col_submenu_link[row][col]}" class="normal_12_blue">{$col_submenu_name[row][col]} </a></td> {/section} </tr> {/section} </table> I tried using plain <div> tags, but it doesn't put them in columns. Any ideas how I can convert this? Hello all, I'm pretty fresh here, but unrelenting confusion has driven me to attempt and find help with my particular question. I am sure there must be a tutorial to help me with this, but I've been all over and I think I'm getting cross-eyed just trying to find what I need! I have been trying to format a website header section using CSS. With tables, it would seem so easy; make a table with two columns, plop one image on the left, make a margin in between, and plop the other image on the right. But with CSS, I simply can't bend my head around it. It's driving me mad! The header is simply a rectangular logo, and a decorative image next to it, with a two pixel margin in between them. I've gotten the logo on there in its top left corner, but every time I try to get the decorative image to snuggle in next to it, it keeps wanting to sit UNDER the logo instead. I have been, to this point, a table designer and apologize if this is an incredibly simple concept with tutorial answers all over the web. Any links to these would be great too! Hello, i am creating a dynamic content php page. I start with a photoshop image and create slices and have it output the HTML and CSS table. The problem i am having is that the center cell where the content should go does not expand when the the text goes out of its bound. Is there a way i can do this? Here is the code and a link to the example output. Code:
<STYLE TYPE="text/css">
<!--
#index-01 {
position:absolute;
left:0px;
top:0px;
width:923px;
height:103px;
}
#index-02 {
position:auto;
left:923px;
top:0px;
width:100%;
height:103px;
background-image:url(images/headerbkgdlg.gif)
}
#index-03 {
position:absolute;
left:0px;
top:103px;
width:240px;
height:35px;
}
#index-04 {
position:absolute;
left:240px;
top:103px;
width:487px;
height:40px;
}
#index-05 {
position:absolute;
left:727px;
top:103px;
width:196px;
height:35px;
}
#index-06 {
position:absolute;
left:923px;
top:103px;
width:32px;
height:452px;
}
#index-07 {
position:absolute;
left:0px;
top:138px;
width:36px;
height:417px;
}
#index-08 {
position:absolute;
left:36px;
top:138px;
width:182px;
height:312px;
}
#index-09 {
position:absolute;
left:218px;
top:138px;
width:22px;
height:417px;
}
#index-10 {
position:absolute;
left:727px;
top:138px;
width:196px;
height:398px;
}
#index-11 {
position:absolute;
left:240px;
top:138px;
width:683px;
height:397px;
}
#index-12 {
position:absolute;
left:36px;
top:450px;
width:182px;
height:105px;
}
#index-13 {
position:absolute;
left:240px;
top:536px;
width:683px;
height:19px;
}
#index-14 {
position:absolute;
left:0px;
top:555px;
width:923px;
height:22px;
}
#index-15 {
position:absolute;
left:923px;
top:555px;
width:100%;
height:21px;
background-color:#DCCC00;
}
#index-16 {
position: absolute;
left: 923px;
width: 100%;
height: 451;
top:103px;
}
-->
</STYLE>
http://67.86.83.106:81/homeline/index.php I would like the bottom portion along with the menu cell to resize vertically based on the amount of data but always atleast have the given size it is now. Thanks for the help Hi, I have a table with a scrollbar that works perfectly in ie but not in mozilla. When I scroll up/down in mozilla, the header is not kept fixed as it should be. I use a div that encloses one table with the content. the css code for the div and the thead: Code:
div.tableContainer_plegado{height: 285px; overflow: auto; width:100%;}
//I also tried top:0, just in case mozilla doesn't support the expression element
thead.lista td{position:relative; top: expression(document.getElementById("data").scrollTop-0);}
thanks in advance!! 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 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 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. 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>
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? 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 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. Hello, I understand it is better to design with <div> tags, seperating content from design. But it seems to me it compromises usability. For instance, if a visually handicapped user tries to enlarge the text on a web site with a design using layers, the text just expands out of the <div> layer, where a <table> will expand with the text. How can I overcome this issue when using the <div> tag. I am trying to make my site as user friendly as possible. Thanks... can someone post an example for me. i am trying to do something like this: http://athletics.ucsd.edu/roster/index.php?id=21 and i can do it w/ html. but if you go to view->text size-> larger, it won't look right anymore since some of the text is too long and wraps to the next line making the table not uniform. so i was wondering how this person did this. thanks! Hello - I'm in the process of consolidating numerous lines of code, I don't know why I'm compelled to do this honestly - This line appears thousands of times on my site: <table cellSpacing=\"0\" cellPadding=\"0\" width=\"500\" border=\"0\">\n" ); php, you know, any ways, I would like to include these options in a css file: table.standard { cellSpacing:0; cellPadding:0; width:500; border:0 } print ( "<table class="standard">\n"); I know that aint right, what I'd really like is a reference site for just css and tables - I googled, but I'd appreciate a guru to really lay it down for me - Thanks ~Dave Hello, I am having problems trying to convert a table into a 'div'. The problem I am running into is due to the fact that this table contains a header (see attachment), rows and cells. How would I go about adding 'rows' and 'cells' to a div? The current CSS code I am using (external file) to create the table in the attachment is the following: Code:
td
{
background-color: #454545;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
border-left: solid 1px #000;
padding: 5px;
}
td.header
{
background-image: url(../img/tableheader.gif);
background-repeat: repeat-x;
border-top: solid 1px #000;
text-align: center;
font-weight: bold;
}
table
{
margin-top: 10px;
}
table.mid
{
margin-left: auto;
margin-right: auto;
}
What I would need is the same thing created but by making use of div's, not tables. I know it is sometimes okay to use tables for tabular data, though I want to totally get rid of them. Any help would be appreciated. |
|||||||