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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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 make Bootstrap table with sticky table head?
- How to prevent column break within an element?
- How to prevent line breaks in the list of items using CSS?
- How to prevent parents of floated elements from collapsing in 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 write a cell phone number in an international way using JavaScript ?
- HTML | DOM Table Object
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.
