Solved

css - table text size

Posted on 2011-03-07
4
213 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
  • 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 82

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 82

Accepted Solution

by:
Dave Baldwin earned 500 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

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…
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 a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…

760 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