Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
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
603 Views
Advertisements