[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

css - table text size

Posted on 2011-03-07
4
Medium Priority
?
218 Views
Last Modified: 2012-05-11
hello there,
I have one table with 450px and a text that usually is a word line by line.. sometimes that word is more than 450px and it makes the table bigger..
I would like to make something so that the table doesn't get bigger and also that the text doesn't appear under.. like this

ThisIsALongWordThatIsT
ooLong

so instead of that I would like

NormalWordHere
ThisIsALongWordThatIsT
OtherWordHere

how can I do that?
0
Comment
Question by:XK8ER
[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
  • 2
4 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 35059449
You'll have to give your columns a fluid width, if you can.  Start by using a percentage on the TD
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35059460
"overflow:hidden;" is the property you want.  http://www.w3schools.com/css/pr_pos_overflow.asp  Make a class and apply it to the <td> you want to control.
0
 
LVL 1

Author Comment

by:XK8ER
ID: 35062734
no its not working can you show a working sample please..
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 35062901
Had to do a little research.  You're right, "overflow:hidden;" doesn't seem to work on tables.  Use "table-layout:fixed;" or a 'div' with "overflow:hidden;" and it will clip the contents.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
div
{
width:160px;
height:250px;
overflow:hidden;
}
.tblfix {table-layout:fixed; } 
-->
</style>
</head>
<body>

<!-- table-layout:fixed; -->
<table class="tblfix" border="1" cellpadding="0" cellspacing="0" summary="" width="150px" style="overflow:hidden;">
<tr><td style="overflow:hidden;">Thisiswaytoolongforthiscelltodayandtomorrow</td></tr>
<tr><td>

<table summary="">
<tr><td>Thisiswaytoolongforthiscelltodayandtomorrow</td></tr>
</table>

</td></tr>
</table>
&nbsp;<br />
<!-- div with overflow:hidden; -->
<div>
<table border="1" cellpadding="0" cellspacing="0" summary="" width="150px" style="overflow:hidden;">
<tr><td style="overflow:hidden;">Thisiswaytoolongforthiscelltodayandtomorrow</td></tr>
<tr><td>

<table summary="">
<tr><td>Thisiswaytoolongforthiscelltodayandtomorrow</td></tr>
</table>

</td></tr>
</table>
</div>

</body>
</html>

Open in new window

0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

649 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