如何制作第一列固定、固定列左侧垂直文本的表格

Question

使用这个fiddle链接修复了第一列的表http://jsfiddle.net/Yw679/6/需要固定列左侧的垂直文本(该文本也是垂直文本，也与第一列一样保持固定(。

小提琴链接和我的预期输出之间的差异1.文本"co1"one_answers"co2"垂直对齐2.垂直文本应该像第一列一样固定。

小提琴编码1.HTML:

<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make 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>

2.CSS

th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;   
}        
.table2 {
width: 200px;
overflow: auto;  
}

这是的预期输出

Answer 1

类似的东西？

th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;   
}        
.table2 {
width: 200px;
overflow: auto;  
}

.text-container {
display: inline;
float: left;
width: 1rem;
}

.text {
text-align: center;
width: 0;
font-size: 10px;
word-wrap: break-word;
line-height: .5rem;
padding: 2px;
}

<div class="text-container">
<div class="text">CO1</div>
<div class="text">CO2</div>
</div>
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make 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>