Warrio Warrio - 2 days ago 4
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.


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


#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?


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.