Как перенести первый столбец, а остальные столбцы прокручивать по горизонтали

Question

Я могу добавить полосу прокрутки, но проблема, с которой я сталкиваюсь, заключается в том, что когда заголовок слишком велик, заголовок переполняется и не разбивается , Я хочу, чтобы текст заголовка разбился на следующую строку, а остальные столбцы должны иметь ту же высоту, что и заголовок.

HTML:

<div id="outerdiv"> 
    <div id="innerdiv"> 
     <table> 
      <tr> 
       <td class="headcol">Big Rowwwww1</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">2</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">3</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">4</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">5</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">6</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">7</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">8</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">9</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
     </table> 
    </div> 
</div> 

CSS:

body { 
     font:16px Calibri; 
    } 
    table { 
     border-collapse:separate; 
     border-top: 3px solid grey; 
    } 
    td { 
     margin:0; 
     border:3px solid grey; 
     border-top-width:0px; 
     white-space:nowrap; 
    } 
    #outerdiv { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 5em; 
    } 
    #innerdiv { 
     width: 100%; 
     overflow-x:scroll; 
     margin-left: 5em; 
     overflow-y:visible; 
     padding-bottom:1px; 
    } 
    .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*/ 
    } 
    .headcol:before { 
     content:'Row '; 
    } 
    .long { 
     background:yellow; 
     letter-spacing:1em; 
    } 

Текущий рабочий код ниже в скрипичной ссылке http://jsfiddle.net/DYgD6/693/

Answer 1

body { 
 
    font: 16 px Calibri; 
 
} 
 
table { 
 
    border - collapse: separate; 
 
    border - top: 3 px solid grey; 
 
} 
 
td { 
 
    margin: 0; 
 
    border: 3 px solid grey; 
 
    border - top - width: 0 px; 
 
    /*white-space:nowrap;*/ 
 
    height: 80 px; 
 
}# 
 
outerdiv { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 5e m; 
 
}# 
 
innerdiv { 
 
    width: 100 % ; 
 
    overflow - x: scroll; 
 
    margin - left: 5e m; 
 
    overflow - y: visible; 
 
    padding - bottom: 1 px; 
 
} 
 
.headcol { 
 
    position: absolute; 
 
    width: 5e m; 
 
    left: 0; 
 
    top: auto; 
 
    border - right: 0 px none black; 
 
    border - top - width: 3 px; 
 
    /*only relevant for first row*/ 
 
    margin - top: -3 px; 
 
    /*compensate for top border*/ 
 
    word - wrap: break -word; 
 
} 
 
.headcol: before { 
 
    content: 'Row '; 
 
} 
 
.long { 
 
    background: yellow; 
 
    letter - spacing: 1e m; 
 
}

<div id="outerdiv"> 
 
    <div id="innerdiv"> 
 
     <table> 
 
     <tr> 
 
      <td class="headcol">Big Rowwwww1</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="headcol">2</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="headcol">3</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="headcol">4</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="headcol">5</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="headcol">6</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="headcol">7</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="headcol">8</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="headcol">9</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
</div>

Я сделал несколько изменений в существующем CSS, пожалуйста, смотрите в то же самое и попробовать это:

 body { 
     font:16px Calibri; 
    } 
    table { 
     border-collapse:separate; 
     border-top: 3px solid grey; 
    } 
    td { 
     margin:0; 
     border:3px solid grey; 
     border-top-width:0px; 
     /*white-space:nowrap;*/ 
     height:80px; 
    } 
    #outerdiv { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 5em; 
    } 
    #innerdiv { 
     width: 100%; 
     overflow-x:scroll; 
     margin-left: 5em; 
     overflow-y:visible; 
     padding-bottom:1px; 
    } 
    .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*/ 
     word-wrap: break-word; 
    } 
    .headcol:before { 
     content:'Row '; 
    } 
    .long { 
     background:yellow; 
     letter-spacing:1em; 
    }