How to prevent text in a table cell from wrapping

Question

Does anyone know how I can prevent the text in a table cell from wrapping   This is for the header of a table  and the heading is a lot longer than the data under it  but I need it to display on only one line   It is okay if the column is very wide   The HTML of my  simplified  table looks like this    lt table gt     lt thead gt       lt tr gt         lt th gt           lt div gt Really long column heading lt  div gt         lt  th gt         lt th gt           lt div gt Really long column heading lt  div gt         lt  th gt         lt th gt           lt div gt Really long column heading lt  div gt         lt  th gt         lt th gt           lt div gt Really long column heading lt  div gt         lt  th gt         lt th gt           lt div gt Really long column heading lt  div gt         lt  th gt         lt th gt           lt div gt Really long column heading lt  div gt         lt  th gt         lt th gt           lt div gt Really long column heading lt  div gt         lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt           lt div gt data lt  div gt         lt  td gt         lt td gt           lt div gt data lt  div gt         lt  td gt         lt td gt           lt div gt data lt  div gt         lt  td gt         lt td gt           lt div gt data lt  div gt         lt  td gt         lt td gt           lt div gt data lt  div gt         lt  td gt         lt td gt           lt div gt data lt  div gt         lt  td gt         lt td gt           lt div gt data lt  div gt         lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    The heading itself is wrapped in a div inside the th tag for reasons pertaining to the javascript on the page     The table is coming out with the headings wrapping onto multiple lines   This seems to only happen when the table is sufficiently wide  as the browser is trying to avoid horizontal scrolling   In my case  though  I want horizontal scrolling   Any ideas

User · Accepted Answer

Have a look at the white-space property  used like this   th       white-space  nowrap      This will force the contents of  lt th gt  to display on one line   From linked page  here are the various options for white-space      normal   This value directs user agents to collapse sequences of white space  and break lines as necessary to fill line boxes       pre   This value prevents user agents from collapsing sequences of white space  Lines are only broken at preserved newline characters       nowrap   This value collapses white space as for  normal   but suppresses line breaks within text       pre-wrap   This value prevents user agents from collapsing sequences of white space  Lines are broken at preserved newline characters  and as necessary to fill line boxes       pre-line   This value directs user agents to collapse sequences of white space  Lines are broken at preserved newline characters  and as necessary to fill line boxes

User · Answer

lt th nowrap  nowrap  gt    or   lt th style  white-space nowrap   gt    or   lt th class  nowrap  gt   lt style type  text css  gt   nowrap   white-space  nowrap     lt  style gt

User · Answer

There are at least two ways to do it   Use nowrap attribute inside the  td  tag    lt th nowrap  nowrap  gt Really long column heading lt  th gt    Use non-breakable spaces between your words    lt th gt Really amp nbsp long amp nbsp column amp nbsp heading lt  th gt

User · Answer

There are at least two ways to do it   Use nowrap attribute inside the  td  tag    lt th nowrap  nowrap  gt Really long column heading lt  th gt    Use non-breakable spaces between your words    lt th gt Really amp nbsp long amp nbsp column amp nbsp heading lt  th gt

User · Answer

lt th nowrap  nowrap  gt    or   lt th style  white-space nowrap   gt    or   lt th class  nowrap  gt   lt style type  text css  gt   nowrap   white-space  nowrap     lt  style gt

User · Answer

For Use with React   Material UI In case you re here wondering how this works for Material UI when building in React  here s how you add this to your  lt TableHead gt  Component   lt TableHead style    whiteSpace   nowrap    gt

User · Answer

There are at least two ways to do it   Use nowrap attribute inside the  td  tag    lt th nowrap  nowrap  gt Really long column heading lt  th gt    Use non-breakable spaces between your words    lt th gt Really amp nbsp long amp nbsp column amp nbsp heading lt  th gt

User · Answer

For Use with React   Material UI In case you re here wondering how this works for Material UI when building in React  here s how you add this to your  lt TableHead gt  Component   lt TableHead style    whiteSpace   nowrap    gt

User · Answer

I came to this question needing to prevent text wrapping at the hyphen   This is how I did it    lt td gt  lt nobr gt Table Text lt  nobr gt  lt  td gt    Reference   How to prevent line break at hyphens on all browsers

User · Answer

lt th nowrap  nowrap  gt    or   lt th style  white-space nowrap   gt    or   lt th class  nowrap  gt   lt style type  text css  gt   nowrap   white-space  nowrap     lt  style gt

User · Answer

I came to this question needing to prevent text wrapping at the hyphen   This is how I did it    lt td gt  lt nobr gt Table Text lt  nobr gt  lt  td gt    Reference   How to prevent line break at hyphens on all browsers

User · Answer

There are at least two ways to do it   Use nowrap attribute inside the  td  tag    lt th nowrap  nowrap  gt Really long column heading lt  th gt    Use non-breakable spaces between your words    lt th gt Really amp nbsp long amp nbsp column amp nbsp heading lt  th gt

User · Answer

lt th nowrap  nowrap  gt    or   lt th style  white-space nowrap   gt    or   lt th class  nowrap  gt   lt style type  text css  gt   nowrap   white-space  nowrap     lt  style gt

[html] How to prevent text in a table cell from wrapping

Examples related to html

Examples related to css