Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 prevent text in a table cell from wrapping using CSS?
In HTML, the table is useful to show the data in the formatted way on the web page. For example, we can show student, product, order, subscription, etc., data.
Sometimes, we get lengthy data that we need to show in the table format. For example, product descriptions can be longer than other product information. So, In such cases, we must avoid wrapping text to the next line to maintain the table layout.
We have a straightforward solution to avoid text wrapping in table cells, which is using the ‘white-space’ property of CSS.
Syntax
Users can follow the syntax below to use the white-space CSS property to prevent the text in a table cell from wrapping.
white-space: nowrap;
In the above syntax, we used the ‘nowrap’ as a value of the ‘white-space’ property to avoid wrapping.
Example 1
In the example below, we created the table containing the city-data. Also, we added the long text in the table header. In CSS, we styled the table using various properties. Also, we used the ‘white-space: nowrap’ CSS property with the table header to avoid wrapping.
In the output, users can try to change the browser window's width and observe that table headers are not wrapping the text.
<html>
<head>
<style>
table {border-collapse: collapse; width: 100%; font-size: 1.5rem;}
th, td {padding: 8px; text-align: left; border: 1px solid blue;}
tr:hover {background-color: #f5f5f5;}
th {background-color: #4CAF50; color: white; white-space: nowrap;}
</style>
</head>
<body>
<h2> Preventing the text wrap <i> in table cell from wrapping </i> using CSS</h2>
<table>
<thead>
<tr> <th> city - first column </th> <th> State - second column </th> <th> Population - Third column </th></tr>
</thead>
<tbody>
<tr> <td> Bengaluru </td> <td> Karnataka </td><td> 8.42 million </td> </tr>
<tr><td> Mumbai </td> <td> Maharashtra </td> <td> 18.41 million </td> </tr>
<tr> <td> Delhi </td> <td> Delhi </td> <td> 16.78 million </td> </tr>
<tr> <td> Hyderabad </td> <td> Telangana </td> <td> 6.81 million</td> </tr>
</tbody>
</table>
</body>
</html>
Example 2
We added the lengthy text content in the example below in each table cell. Also, we add the ‘white-space: nowrap’ CSS property to the alternate table cell. It means adding white-space property in the first, third, fifth, etc. columns.
In the output, users can observe that the text of the second column is wrapped but not the first and third columns.
<html>
<head>
<style>
table {border-collapse: collapse; width: 100%;font-size: 1.5rem;}
th,td {padding: 0.25rem; text-align: left; border: 2px solid blue;}
/* adding white-space for alternative table columns */
th:nth-child(2n+1),
td:nth-child(2n+1) {white-space: nowrap;}
</style>
</head>
<body>
<h2> Preventing the text wrap <i> in table cell from wrapping </i> using CSS </h2>
<table>
<thead>
<tr><th> first header </th>
<th> second header </th>
<th> Third header </th> </tr>
</thead>
<tbody>
<tr><td> first row, first cell </td>
<td> first row, second cell </td>
<td> first row, third cell </td></tr>
<tr><td> second row, first cell </td>
<td> second row, second cell </td>
<td> second row, third cell </td> </tr>
</tbody>
</table>
</body>
</html>
Users learned to prevent table cells from wrapping the text. We can avoid the readability issue by wrapping the text. We used the ‘white-space’ property in this tutorial, but users can try using the ‘overflow’ property.
2K+ Views
