Warrio Warrio - 1 month ago 9
CSS Question

How to break words in a responsive table cell?

I have the following table that contains 3 columns. On a mobile view, I successfully wrapped the email but the cell, where this email is contained, still has the with of a none wrapped email as you can see on the print screen below.

HTML:

<table class="table-responsive">
<tr>
<td id="email-td" class="col-xs-6">
<a href="mailto:shakira.wisoky@example.com">shakira.wisoky@example.com</a>
</td>
<td class="col-xs-5">
Blanditiis id dolores maxime blanditiis. Aut sunt quia cupiditate reprehenderit et.
</td>
<td class="col-xs-1">
<button class="btn btn-danger"></button>
<button class="btn btn-default"></button>
</td>
</tr>
</table>


CSS:

#email-td {
/*max-width: */
display: inline-block;
word-wrap: break-word;
}


fiddle here.

enter image description here

How can make this email table fit in a 12 columns view?

Answer Source

Don't use bootstrap columns for a table. "col-xs-6" works best for divs. I would recreate your html using the div tag rather than a table, if you want it to be responsive. Tables were never really made to be responsive and are annoyingly difficult to manually fix their unresponsiveness.