0

While solving fixed header issue Table data is mis-aligning(displaying) in another columns. The header is now fixed.

Any inputs to solve mis-align of data in another columns?

<html>
  <head>
  </head>
  <body>
  <table border="1" style="width: 600px" cellpadding="0" cellspacing="0">
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
      <td>Column 5</td>
      <td>Column 6</td>
      <td>Column 7</td>
      <td>Column 8</td>
      <td>Column 9</td>
      <td>Column 10</td>
      <td>Column 11</td>
      <td>Column 12</td>
    </tr>
  </table>

  <div style="overflow: auto;height: 100px; width: 620px;">
    <table border="1" style="width: 600px;" cellpadding="0" cellspacing="0">
      <tr>
        <td>Value 1 Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4 Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
      </tr>
      <tr>
        <td>Value 1 Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5 Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
      </tr>
      <tr>
        <td>Value 1 Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4 Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7 Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
      </tr>
      <tr>
        <td>Value 1 Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4 Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
      </tr>
    </table>
  </div>
  </body>
</html>
Jawa
  • 2,336
  • 6
  • 34
  • 39
JCoder
  • 1
  • 1
  • possible duplicate of [Freeze the top row for an html table only](http://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only) – cbeckner Sep 19 '13 at 09:28

1 Answers1

0

Why are you using a separate table for the values? You can have them in the same table.

Anjan Baradwaj
  • 1,219
  • 5
  • 27
  • 54
  • Hi Anjan For solving fixed header issue I used seperate table for values. – JCoder Sep 19 '13 at 09:41
  • These links might help: http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/ http://www.imaputz.com/cssStuff/bigFourVersion.html http://blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8-firefox-35-chrome/ – Anjan Baradwaj Sep 19 '13 at 09:45
  • is there any alternative ways is there – JCoder Sep 19 '13 at 13:07
  • This example solved my issue http://www.htmldrive.net/items/show/1031/Fixed-Headers-Scrolling-Tables-With-jQuery – JCoder Sep 20 '13 at 11:19