How To Wrap The Content Of A Table Cell - W3docs

Trang chủ » Html Table Fixed Column Width Not Word Wrap » How To Wrap The Content Of A Table Cell - W3docs

Có thể bạn quan tâm

w3docs logo Books Learn HTML Learn CSS Learn Git Learn Javascript Learn PHP Learn python Learn Java Exercises HTML JavaScript Git CSS PHP Courses Quizzes Snippets Tools General Tools
  • Password Generator
  • HTML Editor
  • HTML Encoder
  • Base 64
  • Code Diff
  • JSON Beautifier
  • CSS Beautifier
  • Markdown Convertor
  • Find the Closest Tailwind CSS Color
  • Phrase encrypt / decrypt
  • Browser Feature Detection
  • Number convertor
CSS Maker
  • CSS Maker
  • CSS Maker text shadow
  • CSS Maker Text Rotation
  • CSS Maker Out Line
  • CSS Maker RGB Shadow
  • CSS Maker Transform
  • CSS Maker Font Face
Color Tools
  • Color Picker
  • Colors CMYK
  • Colors HWB
  • Colors HSL
  • Color Hex
  • Color mixer
  • Color Converter
  • Colors RGB
  • Color Contrast Analyzer
  • Color Gradient
String Tools
  • String Length Calculator
  • MD5 Hash Generator
  • Sha256 Hash Generator
  • String Reverse
  • URL Encoder
  • URL Decoder
  • Base 64 Encoder
  • Base 64 Decoder
  • Extra Spaces Remover
  • String to Lowercase
  • String to Uppercase
  • Word Count Calculator
  • Empty Lines Remover
  • HTML Tags Remover
  • Binary to Hex
  • Hex to Binary
  • Rot13 Transform on a String
  • String to Binary
  • Duplicate Lines Remover
Change theme
  • Dark
  • Light
  • System
  • Books
    • Learn HTML
    • Learn CSS
    • Learn Git
    • Learn Javascript
    • Learn PHP
    • Learn python
    • Learn Java
  • How To
    • How To NodeJs
    • How To Linux
    • How To AngularJs
    • How To PHP
    • How To HTML
    • How To CSS
    • How To Symfony
    • How To Git
    • How To Apache
    • How To JavaScript
    • How To Java
    • How To Vue.js
    • How To Python
  1. Snippets
  2. CSS
  3. How to Wrap the Content of a Table Cell
How to Wrap the Content of a Table Cell

As we know, the contents of a table can change its structure or dimensions. So, there can be several difficulties with table cells. For example, long words in a table cell may cause the cell width to increase, or long words may cross the cell borders. But you can avoid these by using word wrapping on the cell content.

In this snippet, we suggest two methods: either using the CSS word-wrap or word-break property.

Solution with the CSS word-wrap property

Use the border-collapse property set to "collapse" and table-layout property set to "fixed" on the <table> element. Also, specify the width of the table. Then, set the word-wrap property to its "break-word" value for <td> elements and add border and width to them.

Example of wrapping the content of a table cell with the word-wrap property:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> table { border-collapse: collapse; table-layout: fixed; width: 310px; } table td { border: solid 1px #666; width: 110px; word-wrap: break-word; } </style> </head> <body> <table> <tr> <td>1</td> <td>What is Lorem Ipsum?</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td> </tr> <tr> <td>2</td> <td>Why do we use it?</td> <td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </td> </tr> </table> </body> </html> Try it Yourself » If you want to wrap a word on a new line, use the word-wrap property, but if you need to break it at any appropriate character, use the word-break property.

Solution with the CSS word-break property

Here, we set the margin-left and margin-right properties to "auto" for the <table>, use the "fixed" value of the table-layout property and specify the border-spacing and width of the table. For <td> elements, add the border property and set the word-break to its "break-all" value.

Example of wrapping the content of a table cell with the word-break property:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> table { border-spacing: 0px; table-layout: fixed; margin-left: auto; margin-right: auto; width: 310px; } td { border: 1px solid #666; word-break: break-all; } </style> </head> <body> <table> <tr> <td>1</td> <td>What is Lorem Ipsum?</td> <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td> </tr> <tr> <td>2</td> <td>Why do we use it?</td> <td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </td> </tr> </table> </body> </html> Try it Yourself » Tags html css table wrap

Related Resources

  • How to Wrap Words in a <div> Tag with CSS
  • How to Wrap a Long String Without any Whitespace Character
  • How Not to Wrap the Contents of <p>, <div>, and <span> Elements
  • How to Wrap Text in a <pre> Tag with CSS
Sorry about that How can we improve it? Submit Thanks for your feedback! Thanks for your feedback! Do you find this helpful? Yes No Quizzes
  • PHP basics
  • HTML Basics
  • Javascript Basics
  • CSS Basics
  • ES6 Basics
  • TypeScript Basics
  • React Basics
  • Angular Basics
  • Sass Basics
  • Git Basics
  • Vue.js Basics
  • SQL Basics
  • Python Basics
  • Java Basics
  • NodeJS Basics

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