3

Exactly like the title says. There are hundreds of posts around with this question and all answers are forcing me to use fix width, but that's not the real world.

I want my td to use % and still have tbody scrollable.

I want what Isaac Betesh asked in a comment on an answer to this question "How to apply vertical scrollbar for TBODY":

This example has exact pixel width for each td and th. Is there a way to use % widths instead of px and accomplish the same?

Edit: Don't want to include dozens of examples, because they're all over Stack Overflow, but this is the classic one: JSFiddle.

If you just change the content in thead like this: JSFiddle, it all gets out of sync between thead and tbody.

The solution

 display:block;

doesn't work.

robinCTS
  • 5,746
  • 14
  • 30
  • 37
tcardoso
  • 668
  • 3
  • 8
  • 20

1 Answers1

0

scrollbar that added to tbody is the problem,I set thead width to width: calc(100% - 17px) and some other css and problem solved, this is a working example and this is what I've added to your css :

thead, tbody, tr, td { display: block}
thead {
        width: calc(100% - 17px);
}
tbody td, thead td {
    width: 40%;
    display:inline-block
}
table {
    background-color: #aaa;
    width:50%
}
Shirin Abdolahi
  • 1,047
  • 8
  • 18
  • My example was a lot more complexe, but the calc(100% - 17px); did the trick. Thanks – tcardoso Sep 27 '13 at 15:55
  • 17 px? What if the user change the width of the scroll bar? Or uses a different OS? Isn't it ridiculous that an obvious task with tables (freeze the first row) hasn't yet been implemented after 20+ years of HTML? – Rodrigo Apr 06 '16 at 13:00