?
Solved

css - table text size

Posted on 2011-03-07
4
Medium Priority
?
217 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…
Suggested Courses
Course of the Month10 days, 6 hours left to enroll

765 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