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
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
Post a Comment