Need table help!

mgcom · #1 (**permalink**) Jan 7th, 2006, 16:32

Is it possible to make tables scroll (meaning there are scroll bars inside the cells, but the actual page doesnt scroll)?

If it is possible, please tell me how, if not, NOOOOOO!

bmsterling · #2 (**permalink**) Jan 7th, 2006, 19:43

I don't condone the use of tables, but there is a way:

Code: Select all

<style>
td.toscroll{
width: 100px;
height: 100px;
overflow:auto;
}
</style>
<table>
<tr>
<td class="toscroll"></td>
</tr>
</table>

mgcom · #3 (**permalink**) Jan 8th, 2006, 09:18

it doesnt work. here is the coding for the page, i wonder if anyone can show me where im going wrong:

Code: Select all

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<HEAD>
<script type="text/javascript">
<!-- 2005 - Chris Ridings http://www.searchguild.com -->
<!-- Begin
var linkcount;
function checklinks() {
  if (!(linkcount==document.links.length)) {
   // Something changed the links!
   // Iterate for an id of _goog
   for (i=0; i < document.links.length; i++) {
    if (document.links[i].id.substring(0,5)=="_goog") {
     // If we find an id of _goog then remove the link!
     var tr = document.links[i].parentTextEdit.createTextRange();
     tr.moveToElementText(document.links[i]);
     tr.execCommand("Unlink",false);
     tr.execCommand("Unselect",false);
    }
   }
  }
   setTimeout("checklinks()",500);
}
if (document.getElementById && document.createElement) {
  linkcount=document.links.length;
  setTimeout("checklinks()",500);
}
//  End -->
</script>
<script language="JavaScript" type="text/javascript">
var message="All graphics on Moonlight-Graphix are © and are NOT public domain."; // Message for the alert bo

function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// --> </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Moonlight~Graphix.com  -  FAQ</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
if (timeValue == "0") timeValue = 12;
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock() {
stopclock();
showtime();
}
// End -->
</SCRIPT>
<style type="text/css">
A:link {font-family: Comic Sans MS; font-size : 14px; color: #67C8FF; text-decoration: none; font-weight : bold;}
A:visited {font-family: Comic Sans MS; font-size : 14px; color: #67C8FF; text-decoration: none; font-weight : bold;}
A:active {font-family: Comic Sans MS; font-size : 14px; color: #003366; text-decoration: none; font-weight : bold;}   
A:hover {font-family: Comic Sans MS; font-size : 14px; color: #0000ff; text-decoration: none; font-weight : bold;}
<!--
.style25 {
 font-size: 24px;
 font-weight: bold;
 font-family: "Comic Sans MS";
}
.style26 {
 font-size: 18px;
 font-family: "Comic Sans MS";
}
.style27 {font-size: 18px; font-weight: bold; }
.style28 {font-family: "Comic Sans MS"}
.style29 {font-size: 18px}
.style30 {font-size: 18px; font-weight: bold; font-family: "Comic Sans MS"; }
.style10 { font-size: 24px;
 color: #67C8FF;
 font-weight: bold;
 font-family: "Comic Sans MS";
}
.style13 { font-size: 14px;
 font-weight: bold;
 color: #67C8FF;
 font-family: "Comic Sans MS";
}
.style15 { color: #67C8FF;
 font-family: "Comic Sans MS";
}
.style21 {color: #67C8FF; font-family: "Comic Sans MS"; font-weight: bold; }
-->
</style>
 
</head>
<body bgcolor="4f94cd"><iframe style="position:absolute; top: 15px;" src="menu.html" width="27%" height="95%"></iframe>
<div align="center">
  <table width="100%"  border="0">
    <tr>
      <td width="28%"><?php include("menu.html");?></td>
      <td width="4%">&nbsp;</td>
   <td width="68%"><div align="center">
     <p align="center" class="style25">
       FAQ</p>
     <P class=style26 align=center>Here are the things I am often told/asked.</P>
     <P class=style28 align=center><SPAN class=style27>What is a blinkie?<BR>
       </SPAN><SPAN class=style29>A blinkie is simply a name or word that flashes.</SPAN></P>
     <P class=style28 align=center><SPAN class=style27>Are your graphics free?<BR>
       </SPAN><SPAN class=style29>Yes. None of our graphics cost anything. Furthermore, I have no plans to make this a web site where you have to pay.</SPAN></P>
     <P align=center><SPAN class=style30>Can I be a member of staff on your site?<BR>
       </SPAN><SPAN class=style26>If you haven't noticed, there are currently no staff on this site apart from me. I have no plans to employ any staff. Sorry.</SPAN></P>
     <P align=center><SPAN class=style30>Will you make me a custom graphic?<BR>
       </SPAN><SPAN class=style26>Sorry, I cannot make anyone a custom graphic. However, if you submit your idea to the correct <A 
href="EmailList.htm">E-mail address</A>, then I will add it to the site. </SPAN></P>
     <P align=center><SPAN class=style30>I have a brilliant idea for your web site!!!!<BR>
       </SPAN><SPAN class=style26>Glad to hear it. Tell me and I will see if I can put it up. If I do, you will get a mention in the with thanks page.</SPAN></P>
     <P align=center><SPAN class=style30>How often do update/do work on your web site?<BR>
       </SPAN><SPAN class=style26>As often as I can. Sometimes, I will update my web site, sometimes I do work on my web site that you won't see (e.g. work on some tunes).</SPAN></P>
     <P align=center><SPAN class=style30>Tomorrow it's my birthday. Can you mention me on your site?<BR>
       </SPAN><SPAN class=style26>Happy birthday to you but sorry, no birthday mention.</SPAN></P>
     <P class=style26 align=center><SPAN class=style30>Why aren't there many blinkies?</SPAN><BR>
  Blinkies take quite a while to make, but I try to make as many as I can. </P>
   </div></td>
    </tr>
  </table>
</div>
</body>
</html>

sypher · #4 (**permalink**) Jan 8th, 2006, 13:38

Get rid of all that javascript...please

Put it in an external file.

benbramz · #5 (**permalink**) Jan 8th, 2006, 14:44

its horrible rubbish crappy dreamwevaer javascript....

bmsterling · #6 (**permalink**) Jan 8th, 2006, 17:07

hmm, it doesn't work, you may need to try something like

HTML: Select all

<style>
.toscroll{
    width: 100%;
    height: 500px;
    overflow:auto;
}
</style>

<table width="100%" height="500" cellpadding="0" border="1">
    <tr>
        <td width="150">
        </td>
        <td>
<div class="toscroll">
</div>
        </td>
        <td width="150">
        </td>
    </tr>
</table>

and as someone already eluded to, you should really clean up the javascript, you have duplicate code there.

Corey Bryant · #7 (**permalink**) Jan 8th, 2006, 21:50

You might check out Scrollbars? in tables for content or try

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
<style type="text/css">
div.scrolling
{
width: 200px; 
height: 100px; 
overflow: scroll;
}
</style>

</head>

<body>
<table style="border-collapse: collapse;">
<tr>
<td><div class="scrolling">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc laoreet. Curabitur condimentum, velit sit amet consectetuer dignissim, risus quam nonummy lectus, sed fermentum orci pede vitae nibh. Aliquam erat volutpat. Nunc erat. Quisque convallis nunc ut sem. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pellentesque. Ut nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mi libero, ultricies sit amet, iaculis quis, ultricies eget, dui. Nunc id neque. Nullam egestas porttitor dui. Curabitur diam est, malesuada eget, commodo ac, mattis et, sapien. In vulputate adipiscing urna. Praesent malesuada lectus nec est.</div></td>
</tr>
</table>
</body>

Also remember that the DOCTYPE should come before the opening HTML tag

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How do I do this using a table	AdRock	Web Page Design	2	Apr 14th, 2007 23:23
Am I using table-cell and table-row too much?	idl	Web Page Design	15	Sep 7th, 2006 12:55
Need to align width of Float table with the table below	Vertabase	Web Page Design	4	Mar 8th, 2006 21:21
How do I do in the table	accessman	Databases	1	Oct 15th, 2005 00:57
..copy data from column A in Table A to column B in Table B?	gecastill	Databases	10	Jun 23rd, 2005 18:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Need table help!