Freezing Top Row of a table for website

Question

I am using Tableizer to convert my excel worksheet into HTML code then paste into my website. I'm trying to make my table scrollable. I can't figure out where or how to insert the options listed here: Freezing/Fixing the Top Header Row of a table

Can anyone help??

Here is my code from Tableizer.com

table.tableizer-table {
  border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align:center;
} 
.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #ccc;
  text-align:center;
}   
.tableizer-table th {
  background-color: #C61F13; 
  color: #FFF;
  font-weight: bold;
  text-align:center;
}

<table class="tableizer-table">
  <tr class="tableizer-firstrow"><th width="5%">District</th><th width="5%">Dlr Code</th><th width="20%">Dealer Name</th><th width="5%">Kia CPO Volume Obj</th><th width="5%">Current Standings</th><th width="5%">Enrolled</th><th width="5%">To Go</th></tr>
  <tr><td>CE01</td><td>IL001</td><td>ARLINGTON KIA IN PALATINE</td><td>30 </td><td>8</td><td>yes</td><td>22</td></tr>
  <tr><td>CE01</td><td>IL003</td><td>LIBERTY KIA</td><td>30 </td><td>2</td><td>yes</td><td>28</td></tr>
  <tr><td>CE01</td><td>IL035</td><td>NAPLETON'S KIA OF ELMHURST</td><td>32 </td><td>11</td><td>yes</td><td>21</td></tr>
  <tr><td>CE01</td><td>IL036</td><td>ROCK RIVER KIA</td><td>30 </td><td>0</td><td>no</td><td>30</td></tr>
  <tr><td>CE01</td><td>IL051</td><td>RAYMOND KIA</td><td>30 </td><td>3</td><td>yes</td><td>27</td></tr>
  <tr><td>CE01</td><td>IL054</td><td>GERALD KIA OF NAPERVILLE</td><td>30 </td><td>16</td><td>yes</td><td>14</td></tr>
  <tr><td>CE01</td><td>IL057</td><td>GARY LANG KIA</td><td>30 </td><td>11</td><td>yes</td><td>19</td></tr>
  <tr><td>CE01</td><td>IL058</td><td>CLASSIC KIA</td><td>30 </td><td>2</td><td>yes</td><td>28</td></tr>
  <tr><td>CE01</td><td>IL060</td><td>GROSSINGER KIA</td><td>30 </td><td>0</td><td>yes</td><td>30</td></tr>
  <tr><td>CE01</td><td>IL064</td><td>BOB ROHRMAN SCHAUMBURG KIA</td><td>30 </td><td>0</td><td>no</td><td>30</td></tr>
  <tr><td>CE01</td><td>IL071</td><td>GERALD KIA OF NORTH AURORA</td><td>30 </td><td>13</td><td>yes</td><td>17</td></tr>
  <tr><td>CE01</td><td>IL072</td><td>NAPLETON'S ELGIN KIA</td><td>30 </td><td>20</td><td>yes</td><td>10</td></tr>
  <tr><td>CE02</td><td>OH003</td><td>HALLEEN KIA</td><td>90 </td><td>54</td><td>yes</td><td>36</td></tr>
  <tr><td>CE02</td><td>OH016</td><td>WAIKEM KIA</td><td>30 </td><td>15</td><td>no</td><td>15</td></tr>
  <tr><td>CE02</td><td>OH025</td><td>TAYLOR KIA</td><td>37 </td><td>1</td><td>yes</td><td>36</td></tr>
</table>

score 1 · Answer 1 · 2015-05-14T15:31:04.000

There is no real pretty way to do this.

You will need to take the are you want to be the head out of your table and into a new table and style it like bellow.

all in all ending up with something like this.

you'll will need to match up your column widths though.

if your table is to be a full page let me know and I can show you a way to do it for a larger table.

here is a fiddle

table.tableizer-table {
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  width: 100%;
  height: 300px;
  overflow: scroll;
}
.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #ccc;
  text-align: center;
}
.tableizer-table th {
  background-color: #C61F13;
  color: #FFF;
  font-weight: bold;
  text-align: center;
}
.headtbl {
  background-color: red;
}
.container {
  position: relative;
  width: 100%;
}
.tablearea {
  height: 300px;
  overflow-y: scroll;
}

<div class="container">
  <table class="headtbl">

    <tr class="tableizer-firstrow">
      <th width="5%">District</th>
      <th width="5%">Dlr Code</th>
      <th width="20%">Dealer Name</th>
      <th width="5%">Kia CPO Volume Obj</th>
      <th width="5%">Current Standings</th>
      <th width="5%">Enrolled</th>
      <th width="5%">To Go</th>
    </tr>
  </table>
  <div class="tablearea">
    <table class="tableizer-table">
      <tr>
        <td>CE01</td>
        <td>IL001</td>
        <td>ARLINGTON KIA IN PALATINE</td>
        <td>30</td>
        <td>8</td>
        <td>yes</td>
        <td>22</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL003</td>
        <td>LIBERTY KIA</td>
        <td>30</td>
        <td>2</td>
        <td>yes</td>
        <td>28</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL035</td>
        <td>NAPLETON'S KIA OF ELMHURST</td>
        <td>32</td>
        <td>11</td>
        <td>yes</td>
        <td>21</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL036</td>
        <td>ROCK RIVER KIA</td>
        <td>30</td>
        <td>0</td>
        <td>no</td>
        <td>30</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL051</td>
        <td>RAYMOND KIA</td>
        <td>30</td>
        <td>3</td>
        <td>yes</td>
        <td>27</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL054</td>
        <td>GERALD KIA OF NAPERVILLE</td>
        <td>30</td>
        <td>16</td>
        <td>yes</td>
        <td>14</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL057</td>
        <td>GARY LANG KIA</td>
        <td>30</td>
        <td>11</td>
        <td>yes</td>
        <td>19</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL058</td>
        <td>CLASSIC KIA</td>
        <td>30</td>
        <td>2</td>
        <td>yes</td>
        <td>28</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL060</td>
        <td>GROSSINGER KIA</td>
        <td>30</td>
        <td>0</td>
        <td>yes</td>
        <td>30</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL064</td>
        <td>BOB ROHRMAN SCHAUMBURG KIA</td>
        <td>30</td>
        <td>0</td>
        <td>no</td>
        <td>30</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL071</td>
        <td>GERALD KIA OF NORTH AURORA</td>
        <td>30</td>
        <td>13</td>
        <td>yes</td>
        <td>17</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL072</td>
        <td>NAPLETON'S ELGIN KIA</td>
        <td>30</td>
        <td>20</td>
        <td>yes</td>
        <td>10</td>
      </tr>
      <tr>
        <td>CE02</td>
        <td>OH003</td>
        <td>HALLEEN KIA</td>
        <td>90</td>
        <td>54</td>
        <td>yes</td>
        <td>36</td>
      </tr>
      <tr>
        <td>CE02</td>
        <td>OH016</td>
        <td>WAIKEM KIA</td>
        <td>30</td>
        <td>15</td>
        <td>no</td>
        <td>15</td>
      </tr>
      <tr>
        <td>CE02</td>
        <td>OH025</td>
        <td>TAYLOR KIA</td>
        <td>37</td>
        <td>1</td>
        <td>yes</td>
        <td>36</td>
      </tr>
    </table>
  </div>
</div>

No worries juliana just remember to mark it as fixed so people no they have an answer to use — , May 15 '15 at 21:11

Freezing Top Row of a table for website

1 Answers1