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:
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.
