|
CSS - Static Table Header With Scrollable Table (both Hirrizontal And Vertical)
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) Similar TutorialsI need two scrollable div inside a table. Please help. Details: The div contains a table that should force it to show the scrollbars. This table inside the div has specific width(1180px). The div on the other hand should have its width set to 100%. As to why i'm using a table for the layout, i'm using a masterpage that uses table. Attempt #1 i set the div width to 1180px. This showed the scrollbar. But i don't want the users to be stuck to this if they have bigger resolution. Attempt #2 i added position: absolute; --> there are scrollbars but the 2 divs are overlapping HTML: Code:
<html>
<head>
<style>
.container
{
border: 2px solid red;
overflow: scroll;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
</tr>
</table>
</div>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> aaaa</td>
<td width=200> bbbb </td>
<td width=200> cccc</td>
<td width=200> ddd</td>
<td width=200> eee</td>
<td width=200> fff</td>
<td width=200> ggg</td>
<td width=200> hhh</td>
<td width=200> iii</td>
<td width=200> jjj</td>
<td width=200> kkk</td>
<td width=200> lll</td>
<td width=200> mmm</td>
<td width=200> nn</td>
<td width=200> ppp</td>
</tr>
</table>
</div>
</td>
</tr></table>
</body>
</html>
I've been wanting to solve a table problem I've had for a long time. I want a scrollable table without needing to specify specific px widths for the headers and the table cells. I've been told there is no solution to this. What I've done is duplicate the table. I create a div, give absolute positioning to both tables, show the headers of table1 then use visibility:hidden height:0.01em on subsequent rows. I position the duplicate table - table2 1.8em (1 row) below table1. (I think something could be done with z-index too, and if someone wants to demonstrate I'd be happy to see it). This table has the same data, but skips the headers. Some work is also done to make room for the scrollbar. Here's a sample: http://restoredirect.com/test.html You'll notice I'm close, but just a little off. Can someone help me to get it right? While not ideal, I think this may help many people. Also, if someone does have a more ideal approach please speak up and let me know! 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 there, I have an HTML/CSS design I'm working on, that can be accessed he http://www.design-portal.co.uk/demo/ The CSS can be found he http://www.design-portal.co.uk/demo/style.css Basically what I would like is this: I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example: http://www.design-portal.co.uk/demo/images/demo.jpg As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it? Cheers in advance, Dave So I have a calendar that I created in PHP and I'm displaying it in a table and I'm having trouble aligning the title and the two image arrows that go on either side of it. I'm trying to align everything vertically in the middle of the row and it seems that in Firefox, the Title is lower than the two arrows, but in Chrome and IE it seems to be right in the middle where it should. How do I solve this? Code: <table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cal_left_arrow">
<img src="/images/left_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $prevYear; ?>, <?php echo $prevMonth; ?>);" />
</td>
<td class="cal_title" colspan="5" valign="middle">
<?php echo date('F', mktime(0,0,0,$month,1,$year)).' '.$year; ?>
</td>
<td class="cal_right_arrow">
<img src="/images/right_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $nextYear; ?>, <?php echo $nextMonth; ?>);" />
</td>
</tr>
Code:
#event_calendar {
margin-top:50px;
margin-bottom:20px;
float:left;
height:auto;
width:245px;
}
.calHeaderDays {
font: bold 10px Arial, Helvetica, sans-serif;
background-color: #3F4C6B;
text-align:center;
height: 20px;
width:245px;
color: white;
overflow:visible;
/*border: 1px solid #3F4C6B;*/
}
.cal_title {
text-align: center;
font: bold 16px Arial, Helvetica, sans-serif;
color: #C79810;
height:40px;
vertical-align:middle;
}
.cal_left_arrow {
text-align:right;
height:40px;
vertical-align:middle;
}
.cal_right_arrow {
text-align:left;
height:40px;
vertical-align:middle;
}
table {
width: 245px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
border-collapse: collapse;
}
table img {
cursor: pointer;
cursor: hand;
}
.calToday {
height: 28px;
vertical-align: middle;
background-color: #3F4C6B;
color: #fff;
font-weight:bold;
text-align:center;
font-size: 10px;
}
.slDay {
height: 28px;
font-size: 10px;
width: 14%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
text-align:center;
}
Hi and thanks in advance for any of your help. I need a single colum with several rows, all of which but one have a fixed height. The remaining row/cell should fill the remaining space. I have achieved this in IE6/7/8 with the style "height:100%" attribute but Firefox lets the page scroll of the bottom of the screen. I want the table to be fully visible at all times but with the felxible row/cell collapsing to fit the screen. Code is below with screenshot attached of what I expect to happen (as in IE). Code: <html style="height:100%;"> <body style="height:100%; margin:0;"> <table style="height:100%; width:250px;"> <tr><td style="vertical-align:top; background-color:#eee;">row 1<br />fixed height, some navigation links</td></tr> <tr><td style="height:100%;"><div style="vertical-align:top; height:100%; background-color:#ccc; overflow:auto;">text<br />text<br />text<br />text<br />text<br />text<br />text</div></td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 3<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 4<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 5<br />fixed height again, some navigation links</td></tr> </table> </body> </html> Thanks again for any help or pointers as to where I have gone wrong. 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. 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? I have a problem with my CSS. The intention was to get a static bar at the top of the page which stayed in place as the page was scrolled. That bit works fine. The problem is that the text in the main part of the page scrolls under the static bar. This means when you use any in page links ( to an anchor) the page scrolls so that the relevant part of the page is under the header div. Any ideas on how I can fix this ? The HTML is up at : http://www.benbun.co.uk/test/test.htm Any help would be appreciated. BBBS I'm trying to reduce the amount of real estate that a form and button are taking up in my table. They are expanding the whole row and lining them up with the other contents isn't working in the CSS methods I've tried. Finally I tried reduce the font-size of the cell containing the form and button (all the way down to 1px) which gives the desired result... but I'm a bit concerned about implementing it into all the tables in the site because it seems a bit 'hacky'. Is there a better way to do this? My Webpage You'll see in the first table, final column containing the button, that the button and form and pushed up against the top of the cell and the other cells now have more padding. In the second table, my "font-size:1px" has been applied and gives the desired result. Just curious if there is a better way to do this or if this is will be fine. 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! 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!! http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image. I can do the following and it works: Code:
.icon {vertical-align: middle;}
<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here
However, if I wrap H1 tags around "Header Goes Here" the text drops below the image. Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable. Is there any way to make it so the H1 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. -------------------------------------------------------------------------------- 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. 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, 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 |
|||||||