Table header is not responsive

Describe 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

[el-lsan]

@coston thanks a lot for the fix. it is much better now, however in some cases it still looks broken

[DCosti]

@coston My header contains 20 characters. I tried to tweak the css but i didn’t managed to solve it.