To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column.
The disparities between the fiddle link and my desired outcome are: 1. The texts 'co1' and 'co2' should be vertically aligned. 2. The vertical text needs to stay fixed just like the first column does.
Fiddle Code 1.HTML:
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> keep me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
Check out the expected output here