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
-
Economics & Finance
How to Make CSS Ellipsis Work on a Table Cell?
When dealing with long text in a table, ensuring that it doesn't overflow and ruin your layout is crucial. CSS provides solutions to add ellipses (...) to text that exceeds a cell's width, keeping your UI clean and readable. This article explores two approaches: using the display property and the table-layout property.
Syntax
/* Basic ellipsis properties */
selector {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: value;
}
Method 1: Using the Display Property
The display property allows us to treat the table cell as a block or inline-block element, giving us more control over styling. This approach involves setting a fixed width for the cell, hiding overflow, and using the text-overflow: ellipsis property to display an ellipsis for truncated text.
Steps:
- Step 1: Change the element's display to block or inline-block
- Step 2: Set a fixed width for the cell
-
Step 3: Use
text-overflow: ellipsisto ensure truncated text ends with an ellipsis -
Step 4: Add
overflow: hiddenandwhite-space: nowrapto manage the text's wrapping and visibility
Example
In this example, the table cell truncates text and displays an ellipsis for overflowed content
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
display: block;
border: 2px solid #000;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>This is a very long text that will be truncated with an ellipsis</td>
</tr>
</tbody>
</table>
</body>
</html>
A table cell with black border displaying "This is a very long text..." where the text is cut off with an ellipsis (...) at the end.
Method 2: Using the Table-Layout Property
The table-layout: fixed property sets a consistent layout for the table columns. By combining it with a fixed width for the table and table cells, we can control how text behaves when it exceeds the defined width, showing ellipses for truncated content.
Steps:
-
Step 1: Apply
table-layout: fixedto the table element - Step 2: Define a fixed width for the table and cells
-
Step 3: Use
text-overflow: ellipsis,overflow: hidden, andwhite-space: nowrapfor the<td>elements to handle the overflow
Example
Here's how to implement ellipsis using the table-layout approach
<!DOCTYPE html>
<html>
<head>
<style>
table {
table-layout: fixed;
width: 200px;
border-collapse: collapse;
}
td {
border: 2px solid #000;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>This is another long text example that demonstrates ellipsis functionality</td>
</tr>
</tbody>
</table>
</body>
</html>
A table with fixed layout displaying "This is another long text example that demonstra..." where the text is truncated with an ellipsis at the end.
Key Differences
| Approach | When to Use | Pros | Cons |
|---|---|---|---|
| Display Property | Single cell control | More flexible styling | Breaks table layout |
| Table-Layout | Multiple columns | Preserves table structure | Fixed width requirement |
Conclusion
Both methods effectively create ellipsis in table cells. Use the display method for individual cell control, or the table-layout: fixed approach when you need to maintain proper table structure with multiple columns.
585 Views
