| | |
css div's and tables table cells and scrolling
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
I have a webpage and in my html the container holds the sidebars and the content2 I have put a 3columnX8row table instead of a million <div>s I was wondering how I could make the data cells scroll vertically in my css intead of a million <div>s. well actually 12 <div>s.
this may look crazy, but I'm just learning
#container {
font-family: Arial, Helvetica, Verdana, Sans-serif;
float: right;
width: 640px;
margin: 0 auto;
}
#sidebar-a {
float: right;
width: 120px;
line-height: 18px;
border-left: 1px solid #efefef;
}
#sidebar-a .padding, #sidebar-b .padding, #sidebar-c .padding {
padding: 0;
}
#sidebar-b, #sidebar-c {
clear: right;
float: right;
width: 120px;
line-height: 18px;
border-left: 1px solid #efefef;
}
#content2 {
float: left;
width: 507px;
border-left: 1px solid #efefef;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
#content2 caption {
font-size: 24px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #efefef;
}
table {
height: auto;
border: collapse;
width: auto;
}
td {
width: 33%;
text-align: center;
border: collapse;
border-left: 1px solid #efefef;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
Might look a little nutty Don't need the answer written out just would like to pointed in the right direction, Thanks
this may look crazy, but I'm just learning
#container {
font-family: Arial, Helvetica, Verdana, Sans-serif;
float: right;
width: 640px;
margin: 0 auto;
}
#sidebar-a {
float: right;
width: 120px;
line-height: 18px;
border-left: 1px solid #efefef;
}
#sidebar-a .padding, #sidebar-b .padding, #sidebar-c .padding {
padding: 0;
}
#sidebar-b, #sidebar-c {
clear: right;
float: right;
width: 120px;
line-height: 18px;
border-left: 1px solid #efefef;
}
#content2 {
float: left;
width: 507px;
border-left: 1px solid #efefef;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
#content2 caption {
font-size: 24px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #efefef;
}
table {
height: auto;
border: collapse;
width: auto;
}
td {
width: 33%;
text-align: center;
border: collapse;
border-left: 1px solid #efefef;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
Might look a little nutty Don't need the answer written out just would like to pointed in the right direction, Thanks
Last edited by Dsiembab; Apr 17th, 2007 at 2:54 am. Reason: was confusing and maybe still is
Give the table cell you want to scroll an id, then give it a fixed height, and set overlfow to scroll. Should look something like this:
td#id {
height: 400px;
overflow: scroll;
}
I would also like to coment, that when using div's for layout I rarely use more than 5 or 6. I'm not sure why you think you have to have as many as you believe you do.
td#id {
height: 400px;
overflow: scroll;
}
I would also like to coment, that when using div's for layout I rarely use more than 5 or 6. I'm not sure why you think you have to have as many as you believe you do.
I bought o'rielly's css definitive guide so I don't have to ask uninformed questions.
current personal projects The H8ers Club
•
•
•
•
Thanks for the reply, appreciate it, I was wondering though if I could set this class to all my td's using the min-height and the max-hieght and the overflow auto? right now my page has 8 <div>s I thought i had to use so many div's for the layout. Thanks again, dave
Instead of:
HTML and CSS Syntax (Toggle Plain Text)
td#id
HTML and CSS Syntax (Toggle Plain Text)
.scrol
HTML and CSS Syntax (Toggle Plain Text)
<td class="scrol">
Last edited by MidiMagic; May 8th, 2007 at 3:37 pm.
Daylight-saving time uses more gasoline
•
•
•
•
You certainly can.
Instead of:
in the above style use:HTML and CSS Syntax (Toggle Plain Text)
td#id
Then use this for the opening td or div tags, like this:HTML and CSS Syntax (Toggle Plain Text)
.scrol
HTML and CSS Syntax (Toggle Plain Text)
<td class="scrol">
HTML and CSS Syntax (Toggle Plain Text)
.scroll { max-height: 300px; min-height: 200px; overflow: auto; }
current personal projects The H8ers Club
![]() |
Similar Threads
- CSS Div's For Myspace (HTML and CSS)
- can't delete text from table cells (Site Layout and Usability)
Other Threads in the HTML and CSS Forum
- Previous Thread: arrays & images
- Next Thread: Saving a value in a file
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7






