Question

使用此小提琴链接http://jsfiddle.net/Yw679/6/制作具有固定的第一列的表时，需要在固定列的左侧添加垂直文本（该文本以及垂直文本也像第一列一样保持固定）。

小提琴链接与我的预期输出之间的差异 1.文字'co1'和'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;  
    }

Here's the expected output

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>

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

1 个答案: