Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Abhijit Das
Abhijit Das
5,022 Points
Posted by Abhijit Das
Abhijit Das
5,022 Points

Please help me on this issue, Why my table header isn't displaying as a block element?

I am trying to build a collapsable table, where i can click on th element and open the tbody content like accordion. My problem is the table header isn't behaving as a block level element. I have to use HTML table elements only. pls help me to fix this issue or any other solutions for solving it. I am using bootstrap. my codepen link is here: http://codepen.io/Abhijeet_dasdezine/pen/oYpbaP?editors=1100

Abhijit Das
Abhijit Das
5,022 Points
Abhijit Das
Abhijit Das
5,022 Points

P.S once i click the th it becomes block element however, after collapse it's act like an inline-block element.

1 Answer

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

:point_right: The table is always a block element, the header never is.

But it's only as wide as it needs to be for it's column. When the row content is collapsed, it shrinks to fit the widest title.

There are a number of ways to counteract this. One would be to provided a minimum width for the title cell:

th:nth-child(2) { min-width: 1400px; }