0

I have quite a large table that I use for scheduling in html, and I would like to freeze the left column.

My origional CSS looks like this:

table, th, td {
   border: 1px solid black;
    border-collapse: collapse
} 
td {
    min-width: 35px;
    width: 35px;
    text-align:center;
}
td.name{
    min-width: 150px;
    width: 150px;
    text-align:left;
}

I adjusted it to look like this:

table, th, td {
   border: 1px solid black;
    border-collapse: collapse
} 
td {
    min-width: 35px;
    width: 35px;
    text-align:center;
}
td.name{
    min-width: 150px;
    width: 150px;
    text-align:left;
    Position:fixed;
}

With the hope that this would freeze the left column during scrolling. Instead the I get rows overlapping, and while it does freeze the scrolling text is visible behind the frozen rows.

Example: https://jsfiddle.net/780r86qL/

What can I do to fix these two issues?

Lal
  • 14,726
  • 4
  • 45
  • 70
June Lewis
  • 355
  • 1
  • 6
  • 28

4 Answers4

2

add background: white;

https://jsfiddle.net/780r86qL/2/

table, th, td {
border: 1px solid black;
border-collapse: collapse;
background: white;
}
aahhaa
  • 2,240
  • 3
  • 19
  • 30
  • This is great for the background text, but does not fix the disappearing rows issue. there are two rows that are not showing text in your jsfiddle. – June Lewis Aug 25 '15 at 19:25
  • i didn't see that, maybe this will help you. http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body – aahhaa Aug 25 '15 at 19:30
1

See this fiddle

A simple change in the HTML will make it look better. Add &nbsp; to the empty <td>s like, for example

<tr>
    <td class="name"><a href="schedules.php?user_id=1647">A. Name</a>
    </td>
    <td colspan="28">&nbsp;</td>
    <td bgcolor="Green" colspan="16">&nbsp;</td>
    <td colspan="52">&nbsp;</td>
</tr>

The reason why such a behaviour occurred was because, when there were empty <td>s there was no height for the corresponding <tr>s which broke your design.

Lal
  • 14,726
  • 4
  • 45
  • 70
0

You can position absolute the first column and put the entire table in an overflow x scroll block:

.headcol {
    position:absolute;
    width:5em;
    left:0;
    top:auto;
    border-right: 0px none black;
    border-top-width:3px; /*only relevant for first row*/
    margin-top:-3px; /*compensate for top border*/
}

JSFiddle: http://jsfiddle.net/emn13/YMvk9/

Bryant Frankford
  • 401
  • 3
  • 14
0

this works fine...

    <table cellpadding=3 style='table-layout:fixed; float: left; font-size:85%; width:7000px; '>
<tr>
    <td class="name">Name</td>
    <td>00:00</td>
    <td>00:15</td>
    <td>00:30</td>
    <td>00:45</td>
    <td>01:00</td>
    <td>01:15</td>
    <td>01:30</td>
    <td>01:45</td>
    <td>02:00</td>
    <td>02:15</td>
    <td>02:30</td>
    <td>02:45</td>
    <td>03:00</td>
    <td>03:15</td>
    <td>03:30</td>
    <td>03:45</td>
    <td>04:00</td>
    <td>04:15</td>
    <td>04:30</td>
    <td>04:45</td>
    <td>05:00</td>
    <td>05:15</td>
    <td>05:30</td>
    <td>05:45</td>
    <td>06:00</td>
    <td>06:15</td>
    <td>06:30</td>
    <td>06:45</td>
    <td>07:00</td>
    <td>07:15</td>
    <td>07:30</td>
    <td>07:45</td>
    <td>08:00</td>
    <td>08:15</td>
    <td>08:30</td>
    <td>08:45</td>
    <td>09:00</td>
    <td>09:15</td>
    <td>09:30</td>
    <td>09:45</td>
    <td>10:00</td>
    <td>10:15</td>
    <td>10:30</td>
    <td>10:45</td>
    <td>11:00</td>
    <td>11:15</td>
    <td>11:30</td>
    <td>11:45</td>
    <td>12:00</td>
    <td>12:15</td>
    <td>12:30</td>
    <td>12:45</td>
    <td>13:00</td>
    <td>13:15</td>
    <td>13:30</td>
    <td>13:45</td>
    <td>14:00</td>
    <td>14:15</td>
    <td>14:30</td>
    <td>14:45</td>
    <td>15:00</td>
    <td>15:15</td>
    <td>15:30</td>
    <td>15:45</td>
    <td>16:00</td>
    <td>16:15</td>
    <td>16:30</td>
    <td>16:45</td>
    <td>17:00</td>
    <td>17:15</td>
    <td>17:30</td>
    <td>17:45</td>
    <td>18:00</td>
    <td>18:15</td>
    <td>18:30</td>
    <td>18:45</td>
    <td>19:00</td>
    <td>19:15</td>
    <td>19:30</td>
    <td>19:45</td>
    <td>20:00</td>
    <td>20:15</td>
    <td>20:30</td>
    <td>20:45</td>
    <td>21:00</td>
    <td>21:15</td>
    <td>21:30</td>
    <td>21:45</td>
    <td>22:00</td>
    <td>22:15</td>
    <td>22:30</td>
    <td>22:45</td>
    <td>23:00</td>
    <td>23:15</td>
    <td>23:30</td>
    <td>23:45</td>
</tr>
<tr>
    <td class='name'>Spanish Available</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>5</td>
    <td>6</td>
    <td>6</td>
    <td>7</td>
    <td>9</td>
    <td>8</td>
    <td>12</td>
    <td>12</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>8</td>
    <td>11</td>
    <td>10</td>
    <td>9</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>9</td>
    <td>10</td>
    <td>10</td>
    <td>11</td>
    <td>10</td>
    <td>12</td>
    <td>10</td>
    <td>11</td>
    <td>9</td>
    <td>9</td>
    <td>6</td>
    <td>7</td>
    <td>10</td>
    <td>8</td>
    <td>8</td>
    <td>9</td>
    <td>11</td>
    <td>11</td>
    <td>10</td>
    <td>10</td>
    <td>6</td>
    <td>6</td>
    <td>4</td>
    <td>4</td>
    <td>1</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
    <td class='name'>Coordinators Available</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
</tr>
<tr>
    <td class='name'>Total Staff Available</td>
    <td>0</td>
    <td>0</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>4</td>
    <td>4</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>6</td>
    <td>7</td>
    <td>7</td>
    <td>9</td>
    <td>10</td>
    <td>10</td>
    <td>15</td>
    <td>15</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>11</td>
    <td>14</td>
    <td>13</td>
    <td>13</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>12</td>
    <td>14</td>
    <td>13</td>
    <td>14</td>
    <td>13</td>
    <td>15</td>
    <td>13</td>
    <td>14</td>
    <td>12</td>
    <td>12</td>
    <td>9</td>
    <td>10</td>
    <td>12</td>
    <td>11</td>
    <td>11</td>
    <td>12</td>
    <td>14</td>
    <td>14</td>
    <td>13</td>
    <td>13</td>
    <td>7</td>
    <td>7</td>
    <td>5</td>
    <td>5</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>3</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2603">A. Name</a>
    </td>
    <td colspan="4"></td>
    <td bgcolor="Green" colspan="20"></td>
    <td colspan="72"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=1">A. Name</a>
    </td>
    <td colspan="24"></td>
    <td bgcolor="Grey" colspan="12"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Grey" colspan="7"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Grey" colspan="6"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Grey" colspan="3"></td>
    <td colspan="40"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2519">A. Name</a>
    </td>
    <td colspan="24"></td>
    <td bgcolor="Green" colspan="8"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="16"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-11"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td colspan="38"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2471">A. Name</a>
    </td>
    <td colspan="24"></td>
    <td bgcolor="Green" colspan="10"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="16"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-12"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="16"></td>
    <td colspan="38"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2600">A. Name</a>
    </td>
    <td colspan="26"></td>
    <td bgcolor="Green" colspan="8"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-12"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td colspan="36"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2625">A. Name</a>
    </td>
    <td colspan="28"></td>
    <td bgcolor="Green" colspan="7"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-12"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="18"></td>
    <td colspan="34"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=1647">A. Name</a>
    </td>
    <td colspan="28"></td>
    <td bgcolor="Green" colspan="16"></td>
    <td colspan="52"></td>
</tr>
<tr>
    <td class="name"><a href="schedules.php?user_id=2470">A. Name</a>
    </td>
    <td colspan="28"></td>
    <td bgcolor="Green" colspan="9"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="17"></td>
    <td bgcolor="yellow" colspan="2">M</td>
    <td bgcolor="Green" colspan="-10"></td>
    <td bgcolor="red" colspan="1">B</td>
    <td bgcolor="Green" colspan="14"></td>
    <td colspan="34"></td>
</tr>
</table>

css

   table, th, td {
border: 1px solid black;
border-collapse: collapse
  }
 td {
  min-width: 35px;
  width: 35px;
  text-align:center;
  }
td.name {
min-width: 150px;
width: 150px;
text-align:left;
position: fixed;
background-color:white;
z-index:999999;
}

This is working fine as per your use-case i guess.

Vinay Ranjan
  • 294
  • 3
  • 14