• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1840
  • Last Modified:

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
0
Rowby Goren
Asked:
Rowby Goren
  • 4
  • 3
1 Solution
 
Shaun KlineLead Software EngineerCommented:
You should be able to use the white-space: nowrap to do this.
0
 
Scott Fell, EE MVEDeveloperCommented:
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Scott Fell, EE MVEDeveloperCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now