How to prevent text in a table cell from wrapping using CSS?
Given a table that 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 that exist in 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.
html
<!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.
html
<!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:
Last Updated :
03 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...