0

I am trying to make this table behave. I want it to stay within 80% of the page. I want each column to be a fixed width. I want it to show all without scrolling right. Its fine if it gets super long.
I also want the title bar, with the column names... to always be on top, maybe they call that floating.. idk
Can someone PLEASE help me clean this up ?

Below is the CSS file...

body {
   margin:10en;
   padding:0;
   height:100%;
   width:80%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;

}
#container {
   min-height:100%;
   position:relative;
   height:100%;
}
#header {
   background:#009900;
   padding:10px;
   width:100%;
   height:125px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 64pt;
   font-weight: 900;
   color: #FFFFFF;
   text-align: center;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
#H1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 24pt;
    font-weight: 900;
    color: green;
    padding-top: 24px;
    padding-bottom: 3px;
}
#H2 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 20pt;
    font-weight: 800;
    color: red;
    padding-top: 12px;
    padding-bottom: 3px;
}
#H3 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: 700;
    color: navy;
    padding-top: 10px;
    padding-bottom: 3px;
}
#H4 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: 600;
    color: blue;
    padding-top: 6px;
    padding-bottom: 0px;
}
#H5 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: 500;
    color: black;
    padding-top: 3px;
    padding-bottom: 0px;
}
#H6 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: 400;
    color: white;
}

#table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;}
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
:target:before
{
content: url(/images/tiny.jpeg);
}

Below is the html file...

<html>
<div id="#body">
        <div id="header">The 30 Best Linux Distro's

<link rel="stylesheet" type="text/css" href="testcsstemplate.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        </div>
<title>Linux Distributions</title>
        <div id="H1" align="center">Aroma Computers uses Linux to help you help yourself!</div></br>
<p><a name="news2"></a><b>Linux Distro's...</b></p>
<table align="center" width="600px">
<summary>
The 30 Best Linux Distro's
</summary>
<thead>
  <tr>
    <th colspan="6" scope="colgroup" width="600px"><h1>The 30 Best Linux Distro's</h1></th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="col" width="100px">distroname:</th>
    <th scope="col" width="100px">Homepage:</th>
    <th scope="col" width="100px">User Forums:</th>
    <th scope="col" width="100px">Distro Release:</th>
    <th scope="col" width="100px">Mirrors:</th>
    <th scope="col" width="100px">Documentation:</th>
  </tr>
  <tr>
    <td scope="row">linuxmint</td>
    <td><a href="http://linuxmint.com">http://linuxmint.com</a></td>
    <td><a href="http://linuxmint.com/forum/">http://linuxmint.com/forum/</a></td>
    <td>linuxmint 14</td>
    <td><a href="http://www.linuxmint.com/download.php">http://www.linuxmint.com/download.php</a></td>
    <td><a href="http://community.linuxmint.com/">http://community.linuxmint.com/</a></td>
    <td><a href=""> </a></td>
  </tr>
  <tr>
    <td scope="row">Debian GNU/Linux</td>
    <td><a href="http://www.debian.org/">http://www.debian.org/</a></td>
    <td><a href="http://forums.debian.net/">http://forums.debian.net/</a></td>
    <td>Debian GNU/Linux 6.0</td>
    <td><a href="http://www.debian.org/distrib/ftplist">http://www.debian.org/distrib/ftplist</a></td>
    <td><a href="http://www.debian.org/doc/">http://www.debian.org/doc/</a></td>
  </tr>
  <tr>
    <td scope="row">Ubuntu</td>
    <td><a href="http://www.ubuntu.com/">http://www.ubuntu.com/</a></td>
    <td><a href="http://ubuntuforums.org/">http://ubuntuforums.org/</a></td>
    <td>Ubuntu 12.04.2</td>
    <td><a href="http://www.ubuntu.com/desktop/get-ubuntu/download">http://www.ubuntu.com/desktop/get-ubuntu/download</a></td>
    <td><a href="https://wiki.ubuntu.com/UserDocumentation">https://wiki.ubuntu.com/UserDocumentation</a></td>
  </tr>
  <tr>
    <td scope="row">Kubuntu</td>
    <td><a href="http://www.kubuntu.org/">http://www.kubuntu.org/</a></td>
    <td><a href="http://www.kubuntuforums.net/">http://www.kubuntuforums.net/</a></td>
    <td>Kubuntu 12.10</td>
    <td><a href="http://www.kubuntu.org/getkubuntu/download">http://www.kubuntu.org/getkubuntu/download</a></td>
    <td><a href="https://wiki.kubuntu.org/">https://wiki.kubuntu.org/</a></td>
  </tr>
  <tr>
    <td scope="row">KNOPPIX</td>
    <td><a href="http://www.knoppix.org/">http://www.knoppix.org/</a></td>
    <td><a href="http://www.knoppix.net/forum/">http://www.knoppix.net/forum/</a></td>
    <td>KNOPPIX 7.0.5</td>
    <td><a href="http://www.knopper.net/knoppix-mirrors/index-en.html">http://www.knopper.net/knoppix-mirrors/index-en.html</a></td>
    <td><a href="http://www.knoppix.net/docs/">http://www.knoppix.net/docs/</a></td>
  </tr>
  <tr>
    <td scope="row">Damn Small Linux</td>
    <td><a href="http://www.damnsmalllinux.org/">http://www.damnsmalllinux.org/</a></td>
    <td><a href="http://damnsmalllinux.org/forums/">http://damnsmalllinux.org/forums/</a></td>
    <td>Damn Small Linux 4.4</td>
    <td><a href="http://www.damnsmalllinux.org/download.html">http://www.damnsmalllinux.org/download.html</a></td>
    <td><a href=""></a></td>
  </tr>
  <tr>
    <td scope="row">Red Hat (Enterprise) Linux</td>
    <td><a href="http://www.redhat.com/">http://www.redhat.com/</a></td>
    <td><a href="http://kbase.redhat.com/">http://kbase.redhat.com/</a></td>
    <td>Red Hat Enterprise Linux 6.4</td>
    <td><a href="http://www.redhat.com/download/mirror.html">http://www.redhat.com/download/mirror.html</a></td>
    <td><a href="http://www.redhat.com/docs/">http://www.redhat.com/docs/</a></td>
  </tr>
  <tr>
    <td scope="row">Oracle Linux</td>
    <td><a href="http://www.oracle.com/us/technologies/linux/index.html">http://www.oracle.com/us/technologies/linux/index.html</a></td>
    <td><a href="https://forums.oracle.com/forums/forum.jspa?forumID=822">https://forums.oracle.com/forums/forum.jspa?forumID=822</a></td>
    <td>Oracle Linux 6.3</td>
    <td><a href="https://wikis.oracle.com/display/oraclelinux/Downloading+Oracle+Linux">https://wikis.oracle.com/display/oraclelinux/Downloading+Oracle+Linux</a></td>
    <td><a href="http://linux.oracle.com/documentation/">http://linux.oracle.com/documentation/</a></td>
  </tr>
  <tr>
    <td scope="row">Fedora Project</td>
    <td><a href="http://fedoraproject.org/">http://fedoraproject.org/</a></td>
    <td><a href="http://forums.fedoraforum.org/">http://forums.fedoraforum.org/</a></td>
    <td>Fedora 18</td>
    <td><a href="">http://mirrors.fedoraproject.org/publiclist</a></td>
    <td><a href="http://docs.fedoraproject.org/">http://docs.fedoraproject.org/</a><a href="http://fedoraproject.org/wiki/Docs">http://fedoraproject.org/wiki/Docs</a></td>
  </tr>
  <tr>
    <td scope="row">Yellow Dog Linux</td>
    <td><a href="http://www.yellowdoglinux.com/">http://www.yellowdoglinux.com/</a></td>
    <td><a href="http://www.yellowdog-board.com/">http://www.yellowdog-board.com/</a></td>
    <td>Yellow Dog Linux 6.2</td>
    <td><a href="http://www.terrasoftsolutions.com/support/downloads/">http://www.terrasoftsolutions.com/support/downloads/</a></td>
    <td><a href="http://www.terrasoftsolutions.com/support/installation/">http://www.terrasoftsolutions.com/support/installation/</a></td>
  </tr>
  <tr>
    <td scope="row">CentOS</td>
    <td><a href="http://www.centos.org/">http://www.centos.org/</a></td>
    <td><a href="http://www.centos.org/modules/newbb/">http://www.centos.org/modules/newbb/</a></td>
    <td>CentOS 6.4</td>
    <td><a href="http://www.centos.org/modules/tinycontent/index.php?id=13">http://www.centos.org/modules/tinycontent/index.php?id=13</a></td>
    <td><a href="http://www.centos.org/docs/5/    ">http://www.centos.org/docs/5/ </a></td>
  </tr>
  <tr>
    <td scope="row">Mandriva Linux</td>
    <td><a href="http://www.mandriva.com/">http://www.mandriva.com/</a></td>
    <td><a href="http://forum.mandriva.com/">http://forum.mandriva.com/</a></td>
    <td>Mandriva Linux 2011</td>
    <td><a href="http://www.mandriva.com/en/download">http://www.mandriva.com/en/download</a><a href="">http://wiki.mandriva.com/en/Mandriva_mirrors</a><</td>
    <td><a href="http://wiki.mandriva.com/">http://wiki.mandriva.com/</a></td>
  </tr>
  <tr>
    <td scope="row">ClearOS (formerly ClarkConnect)</td>
    <td><a href="http://www.clearfoundation.com/">http://www.clearfoundation.com/</a></td>
    <td><a href="http://www.clearfoundation.com/component/option,com_kunena/Itemid,297/">http://www.clearfoundation.com/component/option,com_kunena/Itemid,297/</a></td>
    <td>ClearOS 6.3.0 "Community"</td>
    <td><a href="http://www.clearfoundation.com/software/downloads">http://www.clearfoundation.com/software/downloads</a></td>
    <td><a href="http://www.clearfoundation.com/docs/">http://www.clearfoundation.com/docs/</a></td>
  </tr>
  <tr>
    <td scope="row">The Slackware Linux Project</td>
    <td><a href="http://www.slackware.com/">http://www.slackware.com/</a></td>
    <td><a href="http://www.linuxquestions.org/questions/f14">http://www.linuxquestions.org/questions/f14</a></td>
    <td>Slackware Linux 14.0</td>
    <td><a href="http://www.slackware.com/getslack/">http://www.slackware.com/getslack/</a></td>
    <td><a href="http://docs.slackware.com/">http://docs.slackware.com/</a><a href="http://slackbook.org/">http://slackbook.org/</a></td>
  </tr>
  <tr>
    <td scope="row">Gentoo Linux</td>
    <td><a href="http://www.gentoo.org/">http://www.gentoo.org/</a></td>
    <td><a href="http://forums.gentoo.org/">http://forums.gentoo.org/</a></td>
    <td>Gentoo Linux 20121221</td>
    <td><a href="http://www.gentoo.org/main/en/mirrors.xml">http://www.gentoo.org/main/en/mirrors.xml</a></td>
    <td><a href="http://www.gentoo.org/doc/en/index.xml">http://www.gentoo.org/doc/en/index.xml</a></td>
  </tr>
  <tr>
    <td scope="row">Solaris Operating System</td>
    <td><a href="http://www.oracle.com/technetwork/server-storage/solaris11/overview/index.html">http://www.oracle.com/technetwork/server-storage/solaris11/overview/index.html</a></td>
    <td><a href="https://forums.oracle.com/forums/category.jspa?categoryID=303">https://forums.oracle.com/forums/category.jspa?categoryID=303</a></td>
    <td>Oracle Solaris 11</td>
    <td><a href="http://www.oracle.com/technetwork/server-storage/solaris11/downloads/index.html">http://www.oracle.com/technetwork/server-storage/solaris11/downloads/index.html</a></td>
    <td><a href="http://www.oracle.com/technetwork/server-storage/solaris11/documentation/index.html">http://www.oracle.com/technetwork/server-storage/solaris11/documentation/index.html</a></td>
  </tr>
  <tr>
    <td scope="row">SUSE Linux Enterprise Desktop (SLED), SUSE Linux Enterprise Server (SLES)</td>
    <td><a href="http://www.suse.com/">http://www.suse.com/</a></td>
    <td><a href="http://forums.novell.com/suse/">http://forums.novell.com/suse/</a></td>
    <td>SUSE Linux Enterprise 11 SP2</td>
    <td><a href="http://www.suse.com/download-linux/">http://www.suse.com/download-linux/</a></td>
    <td><a href="http://www.novell.com/documentation/suse.html">http://www.novell.com/documentation/suse.html</a></td>
  </tr>
  <tr>
    <td scope="row">openSUSE (formerly SUSE Linux)</td>
    <td><a href="http://www.opensuse.org/">http://www.opensuse.org/</a></td>
    <td><a href="http://forums.opensuse.org/">http://forums.opensuse.org/</a></td>
    <td>openSUSE 12.2</td>
    <td><a href="http://mirrors.opensuse.org/list/all.html">http://mirrors.opensuse.org/list/all.html</a></td>
    <td><a href="http://en.opensuse.org/Portal:Documentation">http://en.opensuse.org/Portal:Documentation</a></td>
  </tr>
  <tr>
    <td scope="row">OpenBSD</td>
    <td><a href="http://www.openbsd.org/">http://www.openbsd.org/</a></td>
    <td><a href="http://daemonforums.org/">http://daemonforums.org/</a><a href="http://forums.bsdnexus.com/">http://forums.bsdnexus.com/</a><</td>
    <td>OpenBSD 5.2</td>
    <td><a href="http://www.openbsd.org/ftp.html"></a>http://www.openbsd.org/ftp.html</td>
    <td><a href="http://www.openbsd.org/docum.html">http://www.openbsd.org/docum.html</a></td>
  </tr>
  <tr>
    <td scope="row">FreeBSD</td>
    <td><a href="http://www.freebsd.org/">http://www.freebsd.org/</a></td>
    <td><a href="http://forums.freebsd.org/">http://forums.freebsd.org/</a></td>
    <td>FreeBSD 9.1</td>
    <td><a href="http://www.openbsd.org/ftp.html">http://www.openbsd.org/ftp.html</a></td>
    <td><a href="http://www.openbsd.org/docum.html">http://www.openbsd.org/docum.html</a></td>
  </tr>
  <tr>
    <td scope="row">(LFS) Linux From Scratch</td>
    <td><a href="http://www.linuxfromscratch.org">http://www.linuxfromscratch.org</a></td>
    <td><a href=""></a></td>
    <td>Linux From Scratch 7.3</td>
    <td><a href="">http://www.linuxfromscratch.org/lfs/download.html</a></td>
    <td><a href="">http://www.linuxfromscratch.org/lfs/view/stable/</a></td>
  </tr>
  <tr>
    <td scope="row">Tiny Core Linux</td>
    <td><a href="http://www.tinycorelinux.net/">http://www.tinycorelinux.net/</a></td>
    <td><a href="http://forum.tinycorelinux.net/">http://forum.tinycorelinux.net/</a></td>
    <td>Tiny Core Linux 4.7</td>
    <td><a href="http://wiki.tinycorelinux.net/wiki:mirrors">http://wiki.tinycorelinux.net/wiki:mirrors</a></td>
    <td><a href="http://wiki.tinycorelinux.com/">http://wiki.tinycorelinux.com/</a></td>
  </tr>
  <tr>
    <td scope="row">BackTrack (created by merging Auditor Security Linux with WHAX)</td>
    <td><a href="http://www.backtrack-linux.org/">http://www.backtrack-linux.org/</a></td>
    <td><a href="http://www.backtrack-linux.org/forums">http://www.backtrack-linux.org/forums</a></td>
    <td>BackTrack 5 R3</td>
    <td><a href="http://www.backtrack-linux.org/downloads/">http://www.backtrack-linux.org/downloads/</a></td>
    <td><a href="http://www.backtrack-linux.org/wiki/">http://www.backtrack-linux.org/wiki/</a><a href="http://www.backtrack-linux.org/tutorials/">http://www.backtrack-linux.org/tutorials/</a><</td>
  </tr>
  <tr>
    <td scope="row">BackBox Linux</td>
    <td><a href="http://www.backbox.org/">http://www.backbox.org/</a></td>
    <td><a href="http://forum.backbox.org/">http://forum.backbox.org/</a></td>
    <td>BackBox Linux 3.01</td>
    <td><a href="http://www.backbox.org/downloads">http://www.backbox.org/downloads</a></td>
    <td><a href="http://wiki.backbox.org/">http://wiki.backbox.org/</a></td>
  </tr>
  <tr>
    <td scope="row">Ophcrack LiveCD</td>
    <td><a href="http://ophcrack.sourceforge.net/">http://ophcrack.sourceforge.net/</a></td>
    <td><a href="http://sourceforge.net/apps/phpbb/ophcrack">http://sourceforge.net/apps/phpbb/ophcrack</a></td>
    <td>Ophcrack LiveCD 3.4.0</td>
    <td><a href="http://sourceforge.net/projects/ophcrack/files/ophcrack-livecd/">http://sourceforge.net/projects/ophcrack/files/ophcrack-livecd/</a></td>
    <td><a href=""> </a></td>
  </tr>
  <tr>
    <td scope="row">(NST) Network Security Toolkit</td>
    <td><a href="http://www.networksecuritytoolkit.org/">http://www.networksecuritytoolkit.org/</a></td>
    <td><a href="http://sourceforge.net/forum/forum.php?forum_id=361524">http://sourceforge.net/forum/forum.php?forum_id=361524</a></td>
    <td>Network Security Toolkit 2.16.0-4104</td>
    <td><a href="http://sourceforge.net/projects/nst/files/">http://sourceforge.net/projects/nst/files/</a></td>
    <td><a href="http://www.networksecuritytoolkit.org/nst/links.html#NST">http://www.networksecuritytoolkit.org/nst/links.html#NST</a></td>
  </tr>
  <tr>
    <td scope="row">DEFT Linux</td>
    <td><a href="http://www.deftlinux.net/">http://www.deftlinux.net/</a></td>
    <td><a href="http://forum.deftlinux.net/">http://forum.deftlinux.net/</a></td>
    <td>DEFT Linux 7.2</td>
    <td><a href="http://www.deftlinux.net/download/">http://www.deftlinux.net/download/</a></td>
    <td><a href="http://www.deftlinux.net/deft-manual/">http://www.deftlinux.net/deft-manual/</a></td>
  </tr>
  <tr>
    <td scope="row">SmoothWall Express (formerly SmoothWall GPL)</td>
    <td><a href="http://smoothwall.org/">http://smoothwall.org/</a></td>
    <td><a href=""></a></td>
    <td>SmoothWall Express 3.0</td>
    <td><a href="http://www.smoothwall.org/download/">http://www.smoothwall.org/download/</a></td>
    <td><a href=""></a></td>
  </tr>
  <tr>
    <td scope="row">Commodore OS Vision</td>
    <td><a href="http://www.commodoreusa.net/CUSA_OS_Vision.aspx">http://www.commodoreusa.net/CUSA_OS_Vision.aspx</a></td>
    <td><a href="http://www.commodore-amiga.org/en/forum">http://www.commodore-amiga.org/en/forum</a></td>
    <td>Commodore OS Vision 1.0 Beta 9</td>
    <td><a href="http://www.commodoreusa.net/CUSA_OS_Vision_Download.aspx">http://www.commodoreusa.net/CUSA_OS_Vision_Download.aspx</a></td>
    <td><a href=""></a></td>
  </tr>
  <tr>
    <td scope="row">GParted Live</td>
    <td><a href="http://gparted.sourceforge.net/livecd.php">http://gparted.sourceforge.net/livecd.php</a></td>
    <td><a href="http://gparted.sourceforge.net/forum.php">http://gparted.sourceforge.net/forum.php</a></td>
    <td>GParted Live 0.14.1-6</td>
    <td><a href="http://partedmagic.com/doku.php?id=downloads">http://partedmagic.com/doku.php?id=downloads</a></td>
    <td><a href="http://partedmagic.com/doku.php?id=downloads">http://partedmagic.com/doku.php?id=downloads</a></td>
  </tr>
  <tr>
    <td scope="row">Parted Magic</td>
    <td><a href="http://partedmagic.com/">http://partedmagic.com/</a></td>
    <td><a href="http://forums.partedmagic.com/">http://forums.partedmagic.com/</a></td>
    <td>pmagic_2013_02_28</td>
    <td><a href="http://partedmagic.com/doku.php?id=downloads">http://partedmagic.com/doku.php?id=downloads</a></td>
    <td><a href="http://partedmagic.com/doku.php">http://partedmagic.com/doku.php</a></td>
  </tr>
</tbody>
</table>
        <div id="#footer">
<div id="H1" align="center" valign="bottom">Brought to you by Aroma Computers, llc</div>
        </div>
    </div>
</html>

Edited by naphets

2
Contributors
3
Replies
23
Views
5 Years
Discussion Span
Last Post by naphets
0

I want it to stay within 80% of the page.

What does this mean? Are you saying you want the width of the table to be 80% of the width of the screen?

I want each column to be a fixed width. I want it to show all without scrolling right.

If what I said above about the table width is true, this will be pretty difficult to accomplish. If you set the width of the table to a precentage you don't want to be telling your columns a specific width they have to be.

I also want the title bar, with the column names... to always be on top, maybe they call that floating.. idk

This is called "sticky" or "persistent" table headers, and you can't do it properly without using javascript. I would use jQuery because they have a lot of extensions already made for getting this type of affect. Here is a write up about it on a great site http://css-tricks.com/persistent-headers

0

80% of the width of the screen?

Yes, which i was hoping was controllable with the css file.

you don't want to be telling your columns a specific width they have to be.

Thats fine... maybe a set % of the 80% of the screen used? Some kinda workaround. I just want to make sure its even.

and you can't do it properly without using javascript. I would use jQuery

I would prefer php if possible? Either way, I will look further into the link you provided.

0

(http://css-tricks.com/persistent-headers)

Pretty cool, it does what i am asking, including the next question... how to repeat it down the page so i can break it into categories. So alright ill use it.
The question now is?????
How do i strip from the code, what i really need out of it... Can you help with that?

Edited by naphets

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.