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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shaun KlineLead Software EngineerCommented:
You should be able to use the white-space: nowrap to do this.
Scott FellDeveloper & 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?
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
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Scott FellDeveloper & 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott FellDeveloper & 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
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
Rowby GorenAuthor Commented:
I am going to review your  "hide td's for size xs." later today or in the morning.

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

Rowby
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.