How To Wrap Table Cell Content Using CSS ? - GeeksforGeeks

Trang chủ » Html Table Fixed Column Width Not Word Wrap » How To Wrap Table Cell Content Using CSS ? - GeeksforGeeks

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Courses
    • For Working Professionals
    • For Students
    • For School Students
  • Tutorials
    • Web Development
    • Web Development using Python
      • Django
      • Flask
    • ML & Data Science
      • Machine Learning
      • Data Science Packages
      • Data Visualization
      • Data Analysis
      • Interview Questions
    • Data Structures & Algorithms
      • Data Structures
        • Tree
      • Algorithms
        • Searching Algorithms
        • Sorting Algorithms
      • Company Wise SDE Sheets
      • DSA Cheat Sheets
    • System Design
    • Interview Corner
    • Languages
    • CS Subjects
    • DevOps And Linux
      • Linux
    • School Learning
    • GATE
      • Other CS Exams
  • HTML/CSS
    • HTML
    • CSS
    • Bootstrap
    • Interview Questions
  • JavaScript
    • JavaScript
    • Learn JavaScript Programming
    • JS Frameworks
    • jQuery
    • ReactJS Frameworks
    • Interview Corners
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
▲ Open In App
  • Solve Coding Problems
  • Share Your Experience
  • How to wrap table cell <td> content using CSS ?
  • How to create equal width table cell using CSS ?
  • How to wrap a text in a <pre> tag using CSS ?
  • How to prevent text in a table cell from wrapping using CSS?
  • How to create table cell using HTML5 ?
  • How to put the caption below the table using CSS ?
  • How create table without using <table> tag ?
  • How to Create a Full-Width Table using CSS?
  • How to set the table cell widths to minimum except last column using CSS ?
  • How to group the body content in a table using HTML5 ?
  • How to remove cellspacing from tables using CSS?
  • How to set the table layout algorithm using CSS ?
  • How to Get Text-Wrapping Effect using CSS ?
  • How to group header content of a table using HTML5 ?
  • How to add border-bottom to table row <tr> in CSS ?
  • How to wrap the text around an image using HTML and CSS ?
  • How to align right in a table cell using CSS ?
  • How to create the tabular layout using CSS Property ?
  • How to create a header cell in a table using HTML5 ?
  • How to Change the Background Color of Table using CSS?
  • Full Stack Development Course
How to wrap table cell <td> content using CSS ? Last Updated : 10 May, 2022 Improve Improve Like Article Like Save Share Report

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 the hierarchy 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:

HTML

<!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:

HTML

<!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:

HTML

<!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.

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.

author chitrankmishra Follow Improve Next Article How to create equal width table cell using CSS ?

Please Login to comment...

Similar Reads

How to wrap an element with more content in flexbox container to have the same width as other elements in CSS ? In a flexbox container, we might have a scenario where you want to wrap an element with more content, such as text or an image, to have the same width as other elements. In this article, we will see how to wrap an element with more content in a flexbox container to have the same width as other elements using CSS. The flexbox or flexible box model i 3 min read What are Cell Padding & Cell Spacing in HTML Table ? In this article, we will discuss the cellpadding and cellspacing properties in HTML. These properties are used with the table tag for defining the spacing and padding of a table. Cellpadding: This property specifies the space between the border of a table cell and its contents (i.e) it defines the whitespace between the cell edge and the content of 2 min read Word-wrap in an HTML Table To enable word-wrap in an HTML table, apply the CSS property word-wrap: break-word; to the table cells (&lt;td&gt; or &lt;th&gt; elements). This ensures that long words or strings are broken into multiple lines within the table cell, preventing them from overflowing and maintaining readability. Table of Content Using CSS word-wrap PropertyUsing Inl 5 min read How to create equal width table cell using CSS ? HTML tables are created using the table tag with the combination of subsequent tags like tr tag to create a new row in the table. The th tag for table headers and td tag is used for defining a cell in the table. However, each cell of the table is by default designed to fit content of any size hence each changes its width according to the informatio 3 min read How to align right in a table cell using CSS ? In this article, we will be demonstrating how to align the data in the table cell to the right text-align property in CSS can be used to align the contents of the data in a given element. Approach: To align the contents of a table cell to right, we can use the text-align property in CSS. The cells which will be the table data can be styled using th 2 min read How to Define a Minimum Width for HTML Table Cell using CSS ? To set a minimum width for an HTML table cell using CSS, apply the min-width property directly to the &lt;td&gt; element, ensuring it does not shrink below the specified size. This ensures a minimum width for the cell content, maintaining layout integrity. Table of Content Using the min-width PropertyApplying a Class or IDUsing the min-width Proper 2 min read How to set the table cell widths to minimum except last column using CSS ? Tables are widely used for showing the data and sometimes we get into a scenario where we need some special kind of styling over the rows or the cells. We will explore one case where we must make the last column dynamic using CSS and the rest taking the required width. These are the following approaches: Table of Content Styling using classesStylin 3 min read How to prevent text in a table cell from wrapping using CSS? Ensuring readability and maintaining the layout of your tables in web design is crucial, especially when dealing with lengthy text in table cells. The CSS white-space property helps you control text wrapping within table cells, ensuring that content stays on one line. This article will walk you through the various values of the white-space property 2 min read How to wrap a text in a &lt;pre&gt; tag using CSS ? In this article, we will learn how to wrap a text in a &lt;pre&gt; tag. The &lt;pre&gt; tag is used to display the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. By default, the &lt;pre&gt; tag does not support the &lt;pre&gt; tag. In the case of rend 2 min read How to wrap the text around an image using HTML and CSS ? Wrapping the text around an image is quite attractive for any kind of website. By using HTML and CSS wrapping an image with the text is possible and there are many ways to do so because the shape of any image is not constant. In HTML : You can also use CSS shape-outside Property depending on the shape of your image.Align images to the right, left, 4 min read View More Articles Article Tags :
  • CSS-Questions
  • CSS
  • Web Technologies
Like three90RightbarBannerImg course-img 254k+ interested Geeks Full Stack Development with React & Node JS - Live Explore course-img 6k+ interested Geeks Complete Bootstrap Course For Beginners Explore course-img 117k+ interested Geeks GATE Computer Science & Information Technology 2025 Explore Explore More We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy Got It ! Lightbox Improvement Please go through our recently updated Improvement Guidelines before submitting any improvements. This article is being improved by another user right now. You can suggest the changes for now and it will be under the article's discussion tab. You will be notified via email once the article is available for improvement. Thank you for your valuable feedback! Suggest changes Please go through our recently updated Improvement Guidelines before submitting any improvements. Suggest Changes Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal. geeksforgeeks-suggest-icon Create Improvement Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all. geeksforgeeks-improvement-icon Suggest Changes Suggestion[CharLimit:2000] Create Improvement

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences Can't choose a topic to write? click here for suggested topics Write and publish your own Article

Từ khóa » Html Table Fixed Column Width Not Word Wrap