Forum Moderators: not2easy

Message Too Old, No Replies

Table cell not behaving as is should

table cell width

         

freelance84

11:19 pm on Mar 26, 2010 (gmt 0)

10+ Year Member



Good evening all.

After a lot of scracting my head and searching the google pages for the past 2 or so hours I have resided to asking for help. CSS is completely new on me and there is a book on the way.

Here is my css script:

table {
table-layout:fixed
width:100px;
}

td#one {
width:25%;
border:1px solid red;
}

td#two {
width:75%;
border:1px
solid blue;
}

And here is the html table using the css script:
<head>
<title>testing tables</title>
<link rel="stylesheet" type="text/css" href="css styles.css">
</head>

<body>
<table>
<tr>
<td id="one">
qwdqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwedqwed
</td>
<td id="two">
edeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
</td>
</tr>
</table></body></html>

The css script only partially works: The borders are red and blue as expected, nice and thin, but the table cells are not sticking to the width I have set.
How do I get the text in the cell to wrap? I have found countless people posting the same problem on the net and the only solution I could find was this. But it doesn't seem to work.

I know it must be trivial, but its stumped me.

choster

11:30 pm on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In CSS3, setting word-wrap: break-word; will cause the long text to wrap inside its constrained-width container. The property is supported by more recent versions of Firefox, IE, and Safari/Chrome.

You can't force text to wrap in arbitrary places using ordinary CSS 2. You can set overflow: auto to generate scrollbars, or overflow:hidden to hide the part that falls outside of the box, or you'd need to use scripting to insert spaces in the long text.

tangor

11:51 pm on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Neither sample line will fit in the described cells, nor will they wrap since each is considered a single word. An ordinary sentence will wrap (do it all the time) but that introduces other alignment problems as the default for td is to center align text in any cell. Look to the align property for td to fix that problem.

freelance84

12:06 am on Mar 27, 2010 (gmt 0)

10+ Year Member



Hmm, scroll bars aren't pretty, but I can't be having some of the text just cut off.

The text it self is coming from a mysql database and being called with php. In fact its php that is creating the table.

When i break up the long strings above with spaces and then test the table, I find the table width is just filling the width of my screen (even though the css says 100px).

To get the table to the right width I have to add in the width in the html: <table width="100">

Any idea?

freelance84

12:08 am on Mar 27, 2010 (gmt 0)

10+ Year Member



PS
when breaking up the strings and inputting the width="100" in the table tag in html it works.

tangor

12:11 am on Mar 27, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



At first glance it appears you don't have a class on the table tag to use the desired css (for width).

StoutFiles

12:13 am on Mar 27, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Make sure to always have a DOCTYPE declared above your <html> tag.

freelance84

12:26 am on Mar 27, 2010 (gmt 0)

10+ Year Member



tangor;
Does the table bit of the script in the css sheet need an id?
I've tried adding a class to the table with the following:
<table class="table">
But, it doesn't work so I'm assuming I've got it wrong.

SoutFiles;
Yea in the html on my computer I have added the DOCTYPE. Just didn't post it on here to try, will do next time to iron out any ambiguities.

tangor

12:42 am on Mar 27, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yes, you'll want an id for that table.