?
Solved

css - table text size

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

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…
Suggested Courses
Course of the Month16 days, 19 hours left to enroll

862 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