html - Extend table columns to full width with auto height scroll -


i'm trying extend columns in table full width, auto height functionality when overflows max height. have width constraint each column shown in example, can suggest fix if keep both functionalities

jsfiddle

if use display:block cant extend width of columns till end(blue color table), , if remove cant use auto scroll property, displays without considering maximum height constraint(orange color table)

it never idea turn table block element, table element. instead use wrappers (no don't stick candy bar wrappers screen).

(demo)

html

<div class="wrap">     <table class="tabheight1">         <tr>             <td class="tdwidth">hey1</td>             <td class="tdwidth">hey1</td>         </tr>         <tr>             <td class="tdwidth">hey2</td>             <td class="tdwidth">hey1</td>         </tr>         <tr>             <td class="tdwidth">hey3</td>             <td class="tdwidth">hey1</td>         </tr>         <tr>             <td class="tdwidth">hey4</td>             <td class="tdwidth">hey1</td>         </tr>         <tr>             <td class="tdwidth">hey5</td>             <td class="tdwidth">hey1</td>         </tr>         <tr>             <td class="tdwidth">hey6</td>             <td class="tdwidth">hey1</td>         </tr>         <tr>             <td class="tdwidth">hey7</td>             <td class="tdwidth">hey1</td>         </tr>     </table> </div> 

css

.wrap {     max-height: 100px!important;     overflow: auto;     border: 2px solid black; } .tabheight1 {     width:100%;     padding:2px;     color:blue; } 

Comments

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -