I have a table and am using the <col> to specify column widths. My problem is that one of the columns that is set at 5% width has a title with 16 characters that is wider than the allotted 5% and makes the column width wider. How can I get the title to wrap at the appropriate width and obey the 5% width? I want the table to be responsive and don't want to set widths in pixels. I tried a hyphen which breaks it and wraps the text under, but the hyphen is not conducive to screen readers.
Use the ‘vw’ element (viewport width), ‘vh’ (viewport height), ‘vmin’ (the smaller of vw or vh), ‘vmax’ (the larger or vw or vh) etc.
1 v = 1% of the containing block
using it looks like this:
p {font-size: 2vw;}
These values are a sizing unit just like px or em, so it can be used to size other elements as well, such was width, margin or padding.
Just in case it doesnt work use something like...
p {font-size: 16px; font-size: 2vw;}
Alternatively you can use word-wrap: break-word; which will make it flow onto the next line