Scrollable table aligning header with body

[violinssoundcool]

I'm writing a program that displays some tabular data. I would like to have the content in the table scrollable and a fixed header. I have achieved this result, but I cannot align the th's and the td's exactly.

Here's my HTML:

Code: Select all

<table width="100%" cellpadding="2" cellspacing="0" align="center">
  <thead>
    <tr>
      <th class="th1">Warehouse</th>
      <th class="th2">Length</th>
      <th class="th3">Available<br />Qty</th>
      <th class="th4">On-Hand<br />Qty</th>
      <th class="th5">Reserved<br />Qty</th>
      <th class="th6">On-Order<br />Qty</th>
      <th class="th7">Average<br />Cost</th>
      <th class="th8">Last<br />Cost</th>
      <th class="th9">Replace<br />Cost</th>
      <th class="th10">Weight per<br />Foot</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="11">
        <div class="scrollable">
          <table width="100%" cellpadding="2" cellspacing="0" align="center">
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>           
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>                   
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>
            <tr>
              <td class="td1">Montgomery - New Steel</td>
              <td class="td2">040  000</td>
              <td class="td3">999</td>
              <td class="td4">999</td>
              <td class="td5">999</td>
              <td class="td6">999</td>
              <td class="td7">9999.99</td>
              <td class="td8">9999.99</td>
              <td class="td9">9999.99</td>
              <td class="td10">999999</td>
            </tr>               
          </table>
        </div>            
      </td>
    </tr>
  </tbody>
</table>


Here's the CSS:

Code: Select all


.scrollable
{
   height: 300px;
   overflow: auto;
   scrollbar-3dlight-color: 333333;
   scrollbar-arrow-color: white;
   scrollbar-base-color: black;
   scrollbar-darkshadow-color: black;
   scrollbar-face-color: black;
   scrollbar-highlight-color: gray;
   scrollbar-shadow-color: gray;   
   width: 100%;
   background-color: black;
}

th
{
   color: white;
   font-size: 13px;
   height: 25px;
   border-right: 1px solid white;
}

td
{
   text-align: center;
   font-size: 13px;
   height: 25px;
}

.td1
{
   height: 50px;
   width: 174px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
}

.th1
{
   width: 174px;
}

.td2
{
   height: 50px;
   width: 77px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
}

.th2
{
   width: 77px;
}

.td3
{
   height: 50px;
   width: 80px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   text-align: right;
}

.th3
{
   width: 80px;
   text-align: right;
}

.td4
{
   height: 50px;
   width: 80px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   text-align: right;
}

.th4
{
   width: 80px;
   text-align: right;
}

.td5
{
   height: 50px;
   width: 80px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   text-align: right;
}

.th5
{
   width: 80px;
   text-align: right;
}

.td6
{
   height: 50px;
   width: 79px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   text-align: right;
}

.th6
{
   width: 79px;
   text-align: right;
}

.td7
{
   height: 50px;
   width: 77px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   text-align: right;
}

.th7
{
   width: 77px;
   text-align: right;
}

.td8
{
   height: 50px;
   width: 78px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   text-align: right;
}

.th8
{
   width: 78px;
   text-align: right;
}

.td9
{
   height: 50px;
   width: 79px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   text-align: right;
}

.th9
{
   width: 79px;
   text-align: right;
}

.td10
{
   height: 50px;
   width: 79px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   text-align: right;
}

.th10
{
   width: 79px;
   text-align: right;
}


I just can't seem to line up the borders correctly without using different sizes. Also, if I do get it aligned in IE, then FF is wacked up. The same is true the other way around. However, when I have them set to the same sizes like in the previous code, Firefox is a lot closer to being lined up than IE. Should I not be using pixels? Does anyone know why it's not working or how to fix it?

[rangana]

Ensure you have a Proper Doctype.

Please show us your complete code, from where your doctype begins till the end (</html>).

[violinssoundcool]

Sorry about not posting all of the code. I just didn't want to waste people's time, but I guess more of the code is relevant than I thought. I don't know much about doctypes, but I have declared one. I don't know if it's the correct one, but the alignment is still an issue with this in there. So, it might be wrong. Anyway, here's the complete code:

[violinssoundcool]

I can't seem to post anything containing code. Each time I try, it says "The Webpage cannot be found." I'm wrapping the code in the [code][/code] tags. Any idea what's causing it?

[rangana]

That could be a problem of the board. Please let webmaster know about that.

You can create a thread on the feedback section.

Anyway, do you have a link instead?