CODEWITHSUNDEEP
javascriptcss
Vivek
Vivek

Reputation: 35

How to make table with fixed first column and vertical text to the left of fixed column

Made a table with first column fixed using this fiddle link http://jsfiddle.net/Yw679/6/ need a vertical text to left of fixed column(the text also vertical text also remains fixed like first column).

Difference between fiddle link and my expected output 1. the text 'co1' and 'co2' is vertically aligned 2. the vertical text should be fixed like the first column is.

fiddle code 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

Upvotes: 1

Views: 72

Answers (1)

mTv
mTv

Reputation: 1356

Something like this?

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>

Upvotes: 1

Related Questions