Open In App

How to prevent text in a table cell from wrapping using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads