Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 26 Feb, 2019

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :