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

Getting the some of the text on one line in a table cell to appear on the next line

I posted this question earlier and received a response. I thought it was the solution, however it did not work across all browsers, only in Firefox and Chrome. It did work in Chrome initially, but not all the time.  It also did not work in Safari or IE. My question is this:

I have the following HTML code:

<div align="center">
<p><table width="60%">
  <tbody style= "line-height:12px; font-size:11px">
  <tr>
<th height="20" bgcolor="#f3f3ea" colspan="4" align="left"><div align="center">UAB Terms</div></th>
</tr>
<tr>
      <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/fall-2014" target="_self">Pre-established Fall 2014</a></div></td>
  
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/spring-2015"target="_self">Pre-established Spring 2015</a></div></td>
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/spring-2015-regular"target="_self">Regular Spring 2015</a></div></td>
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/summer-2015"target="_self">Summer 2015</a></div></td>
  </tr>
<tr>
<td colspan="4">
<hr />
</td>
</tr>
</tbody>
</table>
</p>
</div>

Open in new window

Currently, the value in the third column, "Regular Spring 2015" displays like this:

Regular Spring
2015

I would like to have it be displayed like this:

Regular
Spring 2015

How do I get the word "Spring" to appear on the next line? I don't want the contents in the other cells to change, only for this particular cell. I would also like a solution that will work on all browsers.

Thanks.
0
geeta_m9
Asked:
geeta_m9
1 Solution
 
duttcomCommented:
Me again. Try this -

Regular<br />
Spring&nbsp;2015

Adds a single line break after the Regular and keeps Spring and 2015 together.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Is this for html5 or html4 or xhtml?

I put it through the validator http://validator.w3.org/ all ways and there was an error of some type in each one.  If you can get the code to be valid, you will have a better chance of browsers display your content in a similar fashion.

I would get rid of the p tag surrounding the table to start. That is not needed.  

I also would add the br tag to the other headings as well.  That will force all headings to act the same.  Don't rely on what you see.  You have the width set to a percent and there will be 1000 different widths from 340px wide to over 2000 px wide.
0
 
geeta_m9Author Commented:
Thanks, that seemed to do the trick. I ended up having to do the same thing to the rest of cell contents as well but now they are all appearing the way I want them to.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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