Skip to content
Related Articles

Related Articles

Improve Article

How to wrap table cell <td> content using CSS ?

  • Last Updated : 30 Jul, 2021

Tables in HTML are absurd elements. It is not an easy task to apply CSS properties to a table element. Being a highly structured element, CSS properties are sometimes lost in heirarchy down the structure. It is also very likely that the contents of the table might change the structure or dimensions of the table. For example, long words residing in the table cells can cause the cell width to increases. If you fix that problem, it might happen that the long words cross the cell boundaries. We can avoid this by performing word wrap on the cell data.

There are two methods to wrap table cell <td> content using CSS which are given below:

  • Using word-wrap property: This property is used to allow long words to break and wrap onto the next line.
  • Using word-break property: This property is used to specify how to break the word when the word reached at end of the line. The line breaks in the text can occur in certain spaces, like when there is a space or a hyphen.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to wrap table cell
        td content using CSS?
    </title>
      
    <style>
        h1, h3 {
            text-align: center;
        }
        table {
            border-spacing: 0px;
            table-layout: fixed;
            margin-left:auto; 
            margin-right:auto;
        }
        th {
            color: green;
            border: 1px solid black;
        }
        td {
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
      
    <h3>Simple Example Without Word Wrap</h3>
      
    <table width="600">
        <tr>
            <th>Course Name</th>
            <th>Specifications</th>
            <th>Duration</th>
        </tr>
          
        <tr>
            <td>Data Structures and Algorithms</td>
            <td>
                It includes pre-recorded premium
                <span style="color: red;">
                    Videolectures&programmingquestions
                </span> for practice.
            </td>
            <td>4 months</td>
        </tr>
          
        <tr>
            <td>GFG Placement Programme</td>
            <td>
                This course helps students to prepare
                for the Recruitment drive.
            </td>
            <td>3 months</td>
        </tr>
    </table>
</body>
  
</html>

Output:

Note: In the above table, we have defined a table width of 600px and applied table-layout as fixed. Observe that a long word, which is marked red, is made by removing the spaces, for example purpose.



Method 1: Using word-wrap property: The word-wrap: break-word; property is used to break the long word at an appropriate break point.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to wrap table cell
        td content using CSS?
    </title>
  
    <style>
        h1,
        h3 {
            text-align: center;
        }
  
        table {
            border-spacing: 0px;
            table-layout: fixed;
            margin-left: auto;
            margin-right: auto;
        }
  
        th {
            color: green;
            border: 1px solid black;
        }
  
        td {
            border: 1px solid black;
            word-wrap: break-word;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
  
    <h3>Wrap Table Cell td Content using word-wrap property</h3>
  
    <table width="600">
        <tr>
            <th>Course Name</th>
            <th>Specifications</th>
            <th>Duration</th>
        </tr>
  
        <tr>
            <td>Data Structures and Algorithms</td>
            <td>
                It includes pre-recorded premium
                <span style="color: red;">
                    Videolectures&programmingquestions
                </span> for practice.
            </td>
            <td>4 months</td>
        </tr>
  
        <tr>
            <td>GFG Placement Programme</td>
            <td>
                This course helps students to prepare
                for the Recruitment drive.
            </td>
            <td>3 months</td>
        </tr>
    </table>
</body>
  
</html>

Output:

Method 2: Using word-break property: The word-break: break-all; property is used to break the word at any character.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to wrap table cell
        td content using CSS?
    </title>
  
    <style>
        h1,
        h3 {
            text-align: center;
        }
  
        table {
            border-spacing: 0px;
            table-layout: fixed;
            margin-left: auto;
            margin-right: auto;
        }
  
        th {
            color: green;
            border: 1px solid black;
        }
  
        td {
            border: 1px solid black;
            word-break: break-all;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
  
    <h3>Wrap Table Cell td Content using word-break property</h3>
  
    <table width="600">
        <tr>
            <th>Course Name</th>
            <th>Specifications</th>
            <th>Duration</th>
        </tr>
  
        <tr>
            <td>Data Structures and Algorithms</td>
            <td>
                It includes pre-recorded premium
                <span style="color: red;">
                    Videolectures&programmingquestions
                </span> for practice.
            </td>
            <td>4 months</td>
        </tr>
  
        <tr>
            <td>GFG Placement Programme</td>
            <td>
                This course helps students to prepare
                for the Recruitment drive.
            </td>
            <td>3 months</td>
        </tr>
    </table>
</body>
  
</html>

Output:

Note: Please note the difference between the outcome of both the properties. The word-wrap property wraps the word on a new line while word-break property continues to follow the flow and breaks at any appropriate character.

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

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 :