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 prevent text in a table cell from wrapping using CSS?
To prevent text in a table cell from wrapping using CSS, it helps in improving readability. In this article we will understand how we can prevent text in a table cell from wrapping using CSS white-space property.
We are having a 5*3 table with some data, our task is to prevent text in a table cell from wrapping using CSS.
Steps to Prevent Text in a Table Cell from Wrapping
We will be follwoing below mentioned steps to prevent text wrapping in table cell:
- We have created a table using table tag, used thead and tbody to specify the table header and body section. We have used tr tag to create the rows, th tag for header and td for entering cell value.
- Then we have designed table using CSS properties like border-collapse to collapse the border, centered the text using text-align, added border using border property and added background-color of table heading.
- We have used "white-space: nowrap;" on table header which prevent text in a table cell from wrapping.
Example
Here is a complete example code implementing above mentioned steps prevent text in a table cell from wrapping using white-space: nowrap property. 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: 50%;
}
th,td {
padding: 8px;
text-align: center;
border: 1px solid black;
}
th {
background-color: #04af2f;
color: white;
white-space: nowrap;
}
</style>
</head>
<body>
<h2>
Preventing Text in a Table Cell from Wrapping
Using CSS
</h2>
<p>
In this example we have used <strong>white-space:
nowrap;</strong> property to prevent text in a
table cell from wrapping using CSS.
</p>
<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>
Conclusion
In this article, we have learned and understood how 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 article.
4K+ Views
