import { css } from '@emotion/css'
import { breakWord } from './textOverflow'

const fullWidthTable = (headerChars: number) => css`
  table-layout: fixed;
  width: 100%;
  text-align: left;

  th,
  td {
    padding: 0.5rem;
    vertical-align: top;
  }

  th {
    width: ${headerChars}ch;
  }
  td {
    ${breakWord}
  }
`

export default fullWidthTable
