Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Make the CSS overflow: hidden Work on a <td> Element?
CSS overflow: hidden; property is used to hide the lengthy content based on the size of your element.
Here in this article, we will see how you can use overflow: hidden; on <td> element so we can keep the lengthy content hidden. If you did not set the size of your <td> element then it will stretch and show you the whole content.
Approaches to Make the CSS overflow: hidden Work
Using table-layout: fixed Property
By default, tables adjust column widths dynamically. Using CSS table-layout: fixed; property on the table element ensures that the column widths stay fixed and don't expand to fit their content.
Example Code
<!DOCTYPE html> <html lang="en"> <head> <style> table { table-layout: fixed; width: 100%; } td { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid black; } </style> </head> <body> <table> <tr> <td> CSS overflow: hidden; property is used to hide the lengthy content based on the size of you element. </td> <td> CSS overflow: hidden; property is used to hide the lengthy content based on the size of you element. </td> </tr> </table> </body> </html> Output
Using text-overflow and white-space Properties
To hide extra content inside the cell, use text-overflow and white-space properties along with the overflow property on the td element.
- CSS overflow: hidden: Hides any content that overflows the cell.
- CSS text-overflow: ellipsis: Adds "..." at the end of truncated text.
- CSS white-space: nowrap: Prevents the text from wrapping to the next line.
Example Code
<!DOCTYPE html> <html lang="en"> <head> <style> table { width: 70%; table-layout: fixed; } td { padding: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #070707; } </style> </head> <body> <table> <tr> <td> CSS overflow: hidden; property is used to hide the lengthy content based on the size of you element. </td> <td> CSS overflow: hidden; property is used to hide the lengthy content based on the size of you element. </td> </tr> </table> </body> </html> Output
Updated on: 2024-11-27T12:47:27+05:30
453 Views
Advertisements