Solved

css - table text size

Posted on 2011-03-07
4
215 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 83

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 83

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

738 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