TheWandererr TheWandererr - 3 months ago 7
CSS Question

JqueryMobile Table with a Linebreak in a filled Cell

I have a question related to the jQuery Mobile table.
I have a table that looks like this (In the code below), which is horizontal scrollable with a fixed header using floatThead.
And some of the "td" text can be really long for example like a article discription.

At the moment it just uses the full space and adds no 'br' whatsoever.
And with that behaviour it reduces the available space of the other elements. And by the way the content will be added dynamically.


My question is now, is it possible to force a line break in that long "td" text if the text gets to long? Sort of a br inside the table cell?


<div id="containerDiv">
<table class="ui-responsive ui-shadow gk-decorate tableClass" id="tableId" is="jqm-table" data-role="table">
<thead>
<tr>
<th data-priority="1"><abbr>Header 1</abbr></th>
<th data-priority="1"><abbr>Header 2</abbr></th>
<th data-priority="1"><abbr>Header 3</abbr></th>
<th data-priority="1"><abbr>Header 4</abbr></th>
<th data-priority="1"><abbr>Header 5</abbr></th>
<th data-priority="1"><abbr>Header 6</abbr></th>
</tr>
</thead>
<tbody>
<tr id="someId">
<td>Content</td>
<td>Content</td>
<td>LooooooongContent</td>
<td>RealllllllyLooooongContent</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr id="someId">
<td>Content</td>
<td>Content</td>
<td>LooooooongContent</td>
<td>RealllllllyLooooongContent</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr id="someId">
<td>Content</td>
<td>Content</td>
<td>LooooooongContent</td>
<td>RealllllllyLooooongContent</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr id="someId">
<td>Content</td>
<td>Content</td>
<td>LooooooongContent</td>
<td>RealllllllyLooooongContent</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr id="someId">
<td>Content</td>
<td>Content</td>
<td>LooooooongContent</td>
<td>RealllllllyLooooongContent</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>



Answer

As things currently stand, the <table> is trying to resize the cells perfectly because there are no width's set, you can do this by setting width's on the <th> tags. Doing this will make elements with white space automatically go on to a new line in a <br /> like fashion.

As you don't seem to have white space in your example. You can use word-break like so:

td {
  word-break: break-all;
}

I have provided an example where I cheekily don't add width's to the <th> tags and be lazy and add a width to the table, but you can see the result of using word-break

Comments