How to prevent text in a table cell from wrapping using CSS?
Given a table which contains the table head and body section. The task is to prevent the text in a table cell from wrapping using CSS. To achieve this we use white-space property of CSS. This property forces the contents of th to display in one line. There are many property values exists to the white-space function.
Syntax:
white-space: normal|nowrap|pre|pre-wrap|pre-line;
Example 1: This example uses white-space property to prevent cell wrapping using CSS.
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >white-space property</ title > < style > th { white-space: nowrap; } </ style > </ head > < body > < table border = "1" collap> < thead > < tr > < th >First Heading of GeeksforGeeks</ th > < th >Second Heading of GeeksforGeeks</ th > < th >Third Heading of GeeksforGeeks</ th > < th >Fourth Heading of GeeksforGeeks</ th > </ tr > </ thead > < tbody > < tr > < td >Value</ td > < td >Value</ td > < td >Value</ td > < td >Value</ td > </ tr > </ tbody > </ table > </ body > </ html > |
Output:
Before applying white-space property:
After applying white-space property:
Example 2: This example uses inline white-space property.
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >white-space property</ title > </ head > < body > < table border = "1" collap> < thead > < tr > < th style = "white-space: nowrap;" > First Heading of GeeksforGeeks </ th > < th >Second Heading of GeeksforGeeks</ th > < th style = "white-space: nowrap;" > Third Heading of GeeksforGeeks </ th > < th >Fourth Heading of GeeksforGeeks</ th > </ tr > </ thead > < tbody > < tr > < td >Value</ td > < td >Value</ td > < td >Value</ td > < td >Value</ td > </ tr > </ tbody > </ table > </ body > </ html > |
Output:
Before applying white-space property:
After applying white-space property:
Recommended Posts:
- BootStrap | Text Utilities (Alignment, Wrapping, Weight etc.)
- How to add tooltip to HTML table cell without using JavaScript ?
- How to create table with 100% width, with vertical scroll inside table body in HTML ?
- How to prevent column break within an element?
- How to prevent parents of floated elements from collapsing in CSS?
- How to prevent line breaks in the list of items using CSS?
- How to select all text in HTML text input when clicked using JavaScript?
- How to remove the table row in a table using JavaScript ?
- How to remove table row from table using jQuery ?
- How to add table row in a table using jQuery?
- PHP | Spreadsheet | Setting a cell value by coordinate
- PHP | Spreadsheet | Setting a date and/or time value in a cell
- How to set alternate table row color using CSS?
- HTML | DOM Table Object
- Space between two rows in a table using CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.