Solved

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

Posted on 2013-12-27
8
1,194 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
  • 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 52

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
 
LVL 52

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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 52

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now