Table header is not responsive
See original GitHub issueDescribe the bug Table looks broken when you have long labels in table header.
To Reproduce Try to render following table:
<Table>
<Thead>
<Tr>
<Th>Very loooooooooooooooooooooooooooooong label</Th>
<Th>Very loooooooooooooooooooooooooooooong label</Th>
</Tr>
</Thead>
<Tbody>
{
[0,1,2,3,4].map(() => {
return(
<Tr>
<Td>testing values testing values testing values testing values </Td>
<Td>testing values testing values testing values testing values </Td>
</Tr>
)
})
}
</Tbody>
</Table>
Expected behavior
I am expecting to get the same behaviour as <td>
tag for <th>
, so when there is no enough space, the line should break into multiple lines.
Screenshots
Desktop (please complete the following information):
- OS: Mac OS
- Browser: Chrome
- Version: 74.0.3729.169
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Data Table headers not responsive to the modal
Im trying to have a datatable in a modal but when i launch the modal, the headers is not responsive. But if the...
Read more >WordPress table header is not responsive (mobile)
Hi,. We have alot of trouble with tables in our wordpress posts. The tables look great on desktop, but on mobile the header...
Read more >Table Header not resizing — DataTables forums
The first thing to do is use style="width:100%" on all your table tags. This allows Datatables to properly calculate the column widths. However ......
Read more >Header Is not responsive on Table Device - XTemos Studio
My header is not responsive on a tablet device but it is responsive on a mobile ... So that it can look the...
Read more >How to Responsive sticky Header, Footer In Html Table?
The <thead>, <tbody>, and <tfoot>elements do not affect the table layout, and if you want to apply the changes in table layout, then...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@coston thanks a lot for the fix. it is much better now, however in some cases it still looks broken
@coston My header contains 20 characters. I tried to tweak the css but i didn’t managed to solve it.