There are times when long words in my HTML table cells need to be broken if they overflow their designated area.
To learn how to break table cell words, check out this question: Word-wrap in an HTML table
The recommended CSS style is:
style="word-wrap: break-word; table-layout: fixed; width: 100%"If I use table-layout:fixed, the columns become equal in size. However, with a 100% width for the table and fixed layout, the columns share width equally leading to excessive height.
Check out my fiddle here: http://jsfiddle.net/mavent/Y54s9/17/
What do I need?
- The table has 2 columns, and I want the second column to be as narrow as possible.
- The width of the 2nd column shouldn't exceed the column's name.
- Column names mustn't be wrapped. < th > names should not wrap.
- The 1st column should be wide with flexible width, without fixating on a specific percentage like %60, %70, etc. though a solution using fixed column widths can be considered while ensuring responsiveness.
- The table should be responsive for mobile layouts.
- Words must be strictly wrapped if they exceed the cell width. For example, if a cell can accommodate a maximum of 40 characters but a word is 45 characters long, it should break at the 41st character.
The output should look like this on both small and large screens:
Code:
.myclass1 {
white-space: normal;
}
.myclass2 {
word-wrap: break-word;
table-layout: fixed;
}
<table class="table table-striped table-condensed dataTable myclass1" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
</tbody>
</table>
<hr><hr>
<table class="table table-striped table-condensed dataTable myclass1" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
<tr>
<td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>
</td>
</tr>
</tbody>
</table>
<hr><hr>
<table class="table table-striped table-condensed dataTable myclass2" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
<tr>
<td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>
</td>
</tr>
</tbody>
</table>