Is there a css method to prevent table cells from wrapping?

Hi

I have a table of that includes one column that has phone numbers

Using twitter bootstrap and on cell phones, the phone numbers are wrapping like this:

310-
444-
444

Is there a css way to prevent the contents of the cell from wrapping?  It's okay, for example, if the css can set text in ALL cells from wrapping.

Thanks

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Since you are using bootstrap, one option is to set how the rows wrap for each screen size.  In this case, using div's instead of table.  You will want to play with this and css but this is a good start http://jsbin.com/EbiRoxa/1/edit?html,output
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3">Name</div>
    <div class="col-xs-6 col-sm-4 col-md-3">Title</div>
    <div class="col-xs-4 col-sm-4 col-md-2">Email</div>
    <div class="col-xs-4 col-sm-6 col-md-2">phone</div>
     <div class="col-xs-4 col-sm-6 col-md-2">room</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3">FirstName LastName</div>
    <div class="col-xs-6 col-sm-4 col-md-3">Undergraduate Advisor, Departments of Ethnomusicology and Music</div>
    <div class="col-xs-4 col-xs-4 col-sm-4 col-md-3">first.lastname@email.com</div>
    <div class="col-xs-4 col-sm-6 col-md-2">555-555-5555</div>
    <div class="col-xs-4 col-sm-6 col-md-1">222</div>
  </div>

Open in new window

0
 
Shaun KlineLead Software EngineerCommented:
You should be able to use the white-space: nowrap to do this.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you sure your table is not collapsing?  

You can set a min-width a td in css but that would negate the responsive features.  You may want to look at the data in the table or how it is displayed wide screen vs small screen.

To answer your question, add a width to your td's.  
td{min-width:300px;}
<table>
<tr><td>do not wrap</td></tr>
<table>

Open in new window

If you want to target a specific td, you can add a class
td.min{min-width:300px;}
<table>
<tr><td class="min">do not wrap</td><td>ok to wrap</td></tr>
<table>

Open in new window

If this does not help, do you want to give us a link to your page?
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Rowby GorenAuthor Commented:
Here's a link to the development site.
link to table

The page looks fine on desktop,  But on cell phone the person's name and cell phone number are word wrapped.

Thanks

Rowby
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you want to stick with tables, you can add a row and hide td's for size xs.
<table>
    <tr>
    <td>Name</td>
    <td>Title</td>
    <td class="hidden-xs">Email</td>
    <td class="hidden-xs">phone</td>
     <td class="hidden-xs">room</td>
  </tr>
     <tr class="visible-xs">
        <td>Email</td>
    <td>phone</td>
     <td>room</td>
     </tr>
  <tr>
    <td>FirstName LastName</td>
    <td>Undergraduate Advisor, Departments of Ethnomusicology and Music</td>
    <td class="hidden-xs">first.lastname@email.com</td>
    <td class="hidden-xs">555-555-5555</td>
    <td class="hidden-xs">222</td>
  </tr>
     <tr class="visible-xs">
      <td>first.lastname@email.com</td>
    <td>555-555-5555</td>
    <td>222</td>
     </tr>
  </table>

Open in new window

Both examples I provided assume bootstrap 3
0
 
Rowby GorenAuthor Commented:
Hi, padas: Scott Fell,

I'm using a special component that will only work with tables.  Not divs.  It does some interesting "Magic" when the table is viewed on a cell.

So thanks anyway.  I will keep your suggestions in my tool box.

ROwby
0
 
Rowby GorenAuthor Commented:
I am going to review your  "hide td's for size xs." later today or in the morning.

Thanks!
0
 
Rowby GorenAuthor Commented:
Thanks for the solution and sorry for the delay in awarding your points!

Rowby
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.