Solved

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

Posted on 2013-12-27
8
1,513 Views
Last Modified: 2014-01-26
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
Comment
Question by:Rowby Goren
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 26

Expert Comment

by:Shaun Kline
ID: 39742005
You should be able to use the white-space: nowrap to do this.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39742017
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39742226
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
Independent Software Vendors: 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!

 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39742653
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39742666
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39742675
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39742676
I am going to review your  "hide td's for size xs." later today or in the morning.

Thanks!
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39810113
Thanks for the solution and sorry for the delay in awarding your points!

Rowby
0

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question