html - Can't align thead and tbody in scrollable table -
i have scrollable table isn't full, this: 
2 things happening here: background disappears , th columns not aligned.
i messing around demo found somewhere , read display: table-header-group aligns tbody header, problem here if use scroll stops working: here's have far:
.scroll { /* optional */ /* border-collapse: collapse; */ border-spacing: 0; font-family: raleway; padding-top: 15px; padding-left: 15px; border-collapse: collapse; color: #005693; border-radius: 10px; font-size: 12px; text-align: center; } .scroll tbody, .scroll thead { display:block; } thead tr th { height: 30px; line-height: 30px; /* text-align: left; */ } .scroll tbody { height: 100px; overflow-y: auto; overflow-x: hidden; } .scroll tbody { border-top: 2px solid black; } .scroll tbody td, thead th { /* width: 20%; */ /* optional */ border-right: 1px solid black; /* white-space: nowrap; */ } .scroll tbody td:last-child, thead th:last-child { border-right: none; }<table class="scroll"> <thead> <tr> <th>job</th> <th>client id</th> <th>company</th> <th>representative</th> <th>status</th> <th>report</th> <th>recieved</th> <th>delivered</th> <th>quotation</th> </tr> </thead> <tbody> <tr> <td>content 1</td> <td>content 2</td> <td>content 3</td> <td>content 4</td> <td>content 5</td> <td>content 6</td> <td>content 7</td> <td>content 8</td> <td></td> </tr> <tr> <td>content 1</td> <td>content 2</td> <td>content 3</td> <td>content 4</td> <td>content 5</td> <td>content 6</td> <td>content 7</td> <td>content 8</td> <td></td> </tr> <tr> <td>content 1</td> <td>content 2</td> <td>content 3</td> <td>content 4</td> <td>content 5</td> <td>content 6</td> <td>content 7</td> <td>content 8</td> <td></td> </tr> <tr> <td>content 1</td> <td>content 2</td> <td>content 3</td> <td>content 4</td> <td>content 5</td> <td>content 6</td> <td>content 7</td> <td></td> <td></td> </tr> <tr> <td>content 1</td> <td>content 2</td> <td>content 3</td> <td>content 4</td> <td>content 5</td> <td>content 6</td> <td>content 7</td> <td></td> <td></td> </tr> <tr> <td>content 1</td> <td>content 2</td> <td>content 3</td> <td>content 4</td> <td>content 5</td> <td>content 6</td> <td>content 7</td> <td></td> <td></td> </tr> <tr> <td>content 1</td> <td>content 2</td> <td>content 3</td> <td>content 4</td> <td>content 5</td> <td>content 6</td> <td>content 7</td> <td></td> <td></td> </tr> </tbody> </table>how can align tbody thead having in account content 8 , 9 not used? of course keeping scroll.
here's fiddle http://jsfiddle.net/crspu/4574/
in case has same issue found great solution, here's fiddle of it. if want add rows keep adding +td css , preferred sizes :d
Comments
Post a Comment