CSS td {width:20%;} NO RESIZE [Archive]

View Full Version : CSS td {width:20%;} NO RESIZE

mson77

08-15-2008, 03:58 AM

Hello,

After several hours trying to understand my error... I joined into this forum to get some help.

My little code:

<html>
<head>
<title>TEST with 5 columns 20% each</title>
<style>
* {
margin: 0;
padding: 0;
}
td{
width: 20%;
padding: 1px;
font-family: Verdana;
font-size: 0.7em;
}
input {
padding:10px;
}
input:focus {
background: #FFB;
}
</style>
</head>
<body>
<table style="margin:40px auto; width:95%;">
<tr><td colspan=5 style="border-bottom: 1px solid #f80;">FORM 1</td></tr>
<tr><td>columnA(1X)<br><form><input style="width:90%;"></form></td>
<td>columnB(1X)<br><input style="width:90%;"></td>

<td colspan=2>columnC(2X)<br><input style="width:95%;"></td>
<td>columnD(1X)<br><input style="width:90%;" maxlength=14></td></tr>
</table>
</body>
</html>

I expect to have "columnC" with double-sized width compared with others (A,B,D). but I can not have this column with double-sized width (40%).

Where am I making mistake?

Regards,

TwilightRealm

08-15-2008, 06:50 AM

Is this what you're wanting to do?
<html>
<head>
<title>TEST with 4 columns 20% each</title>
<style type="text/css">

</style>
</head>
<body
<table style="margin:40px auto;" align="center">
<tr>
<td colspan="4" style="border-bottom: 1px solid #f80;">FORM 1</td>
</tr>
<tr>
<td>columnA(1X)<br />
<form>
<input type="text" style="width:100%;" />
</form>
</td>
<td>columnB(1X)<br />
<input type="text" style="width:100%;" />
</td>
<td style="width: 40%">columnC(2X)<br />
<input type="text" style="width:100%;" />
</td>
<td>columnD(1X)<br />
<input type="text" style="width:100%;" maxlength="14" />
</td>
</tr>
</table>
</body>
</html>

effpeetee

08-15-2008, 07:04 AM

TwilightRealm

08-15-2008, 07:08 AM

<html>
<head>
<title>TEST with 5 columns 20% each</title>
<style>
* {
margin: 0;
padding: 0;
}
td{
width: 20%;
padding: 1px;
font-family: Verdana;
font-size: 0.7em;
}

This should be:- <style type = "text/css">

Also you do not have a Doctype as the first line of your code.

Frank

In order to comply to W3C standards, you are correct. However, I don't think he's looking to do a complete coding of his page yet until he has the idea down. Different doctypes can affect CSS, but basic CSS tends to work without a doctype. I'm sure he'll add one when he's finished.

effpeetee

08-15-2008, 07:13 AM

In order to comply to W3C standards, you are correct. However, I don't think he's looking to do a complete coding of his page yet until he has the idea down. Different doctypes can affect CSS, but basic CSS tends to work without a doctype. I'm sure he'll add one when he's finished.
A missing Doctype is not an acceptable way to expect help. It suggests that the poster has not done his best to get his code working.

A Doctype is NOT an optional extra.

Frank

JygzIsHere

08-15-2008, 07:24 AM

Hi mson,

I think it's because you set the width to 20%, and because of the td content's are in the same length. I tried to change the width in a specific pixels and it worked well, but the problem is it's a fixed width:

<html>
<head>
<title>TEST with 5 columns 20% each</title>
<style>
* {
margin: 0;
padding: 0;
}
td{
width: 180px;
padding: 1px;
font-family: Verdana;
font-size: 0.7em;
}
input {
padding:10px;
}
input:focus {
background: #FFB;
}
</style>
</head>
<body>
<table style="margin:40px auto; width:95%;">
<tr><td colspan="5" style="border-bottom: 1px solid #f80;">FORM 1</td></tr>
<tr>
<td>columnA(1X)<br><form><input style="width:90%;"></td>
<td>columnB(1X)<br><input style="width:90%;"></td>
<td colspan="2">columnC(2X)<br><input style="width:95%;"></td>
<td>columnD(1X)<br><input style="width:90%;" maxlength=14></td>
</tr>
</table>
</body>
</html>

VIPStephan

08-15-2008, 11:06 AM

I agree with effpeetee and I would also add that the entire table concept is not the right appraoch. What you, mister original poster, are having here is not tabular data, and a table for layout is stupid (http://hotdesign.com/seybold/). You should use semantic HTML (http://boagworld.com/technology/semantic_code_what_why_how/) and either float the items so they are in line or position them in some way.

Any help based on the current code would just make things worse and actually not help at all since you don’t learn how to do it right.

mson77

08-15-2008, 03:00 PM

Hello EVERYBODY!

Thank you very much for you VERY KIND attentions!

Please allow me complete with some information:

1) The code I sent was just an example. Not the complete and full code. It targets only to focus into the issue/problem (my problem) and to make easier to understand what I am trying to explain to all of you; (because English is not my native language).
"TwilightRealm" is 100% correct when he says about my intention to show up the idea in this topic. (mindreader)

2) Regarding <style ="text/css">
I forgot to write in.
Anyway... "effpeetee" is 100% right too.

3) Regarding the solution posted by "TwilightRealm"... the answer to him is:
Answer: YES! This is what I expect to have.
But your solution has 4 columns instead of 5 and you used "style='width:40%;'" instead of "colspan=2".

My question: WHERE am I making mistake? What concept am I ignoring?

4) To "JygzIsHere"... I thank you your attention too!
I expect to write a page with proportional width look. Thanks anyway!

5) To "VIPStephan"... I thank you your attention and the pointed out issue.
I understand that is semantic correct to create using <div> and CSS (tableless)... and because browser will be faster in this method than traditional and old <table> based solution. Any way... I agree with you and I am thankfull for your recomendation.
Regarding the code that I posted... can you tell me:

5a) Considering style td width:20%, and considering row based in 5 columns. Why the td with colspan=2 will not result in 40% width column?

5b) In other case that I did... it works BUT I can not see the difference. Than I stripped out the code... and I posted in my original thread.

Thanks to everybody!

Regards,

effpeetee

08-15-2008, 03:20 PM

We didn't mean to be unkind, but the issue of the Doctype is always with us and it is difficult to understand why people have such a seeming antipathy to advice about it.

Anyway, if you had sent in your two versions of the code it may have helped us to learn something and we would have had a better chance of being successful.

Apart from that, I hope you find what the problem was/is and let us know. I can't stand mysteries. My finger-nails are already too short.

Kind regards,

By the way, your command of english is fine.

Frank

mson77

08-15-2008, 04:24 PM

VIPStephan

08-15-2008, 04:46 PM

Hello EVERYBODY,

Considering the messages above my conclusion is (may be wrong):
The scenario is:

tr --> with 5 columns

td css'ed with: width:20% (equal width to all 5 columns)

The case: (it is not enough)

<td colspan=2> THIS is not considered for some reason (not documentated)

The workaround (with TwilightRealm's help):
<td colspan=2 style="width:40%;">

Conclusion:
Have to reafirm the doubleness using style.

Regards,

mson77

I could have told you that if you set the cell width to 20% with CSS and have a cell with colspan in the HTML effectively CSS isn’t counting two cells that are just merged but sees it as one cell (which it is, as a matter of fact), thus, td {width: 20%;} does apply to this one cell (that has been merged out of two) since the element name is still “td” to which CSS applies the style.

<style type="text/css">
td {width: 20%;}
</style>
…
…
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
…

The above example shows that four cells × 20% = 80%, not 100% and CSS is more strict at applying dimensions than if you did it in HTML so this has just got to be an issue. Luckily it’s just a math issue here.

mson77

08-15-2008, 04:58 PM

Conclusion:

<td colspan=N> --> will be considered to CSS as just ONE <td> and will apply the CSS rules of <td> as defined.

Then style='width:40%' will be needed to get the desired width. (N=2 in this case)

But I understand that "colspan=N" should be defined to conforms with HTML rules.

Regards,

mson77

Moodle

08-15-2008, 05:31 PM

Is that doctype added?
If that doctype is not added, other browsers could experience problems with your site.
As effpeetee said 'A doctype is not an optional extra'.

Moodle.

mson77

08-15-2008, 05:48 PM

Hello Moodle,

YES!!
The doctype is added.

Regards,

Avril

08-16-2008, 04:10 PM

If you need only one horizontal line of boxes, why don't you size the form text boxes within the table instead? Eg:

<table><tr>
<td>
ColumnA<form name="form1">
<input type="text" value="Name" size=20 name="textbox1">
</form></td>
<td>ColumnB<form name="form2">
<input type="text" value="Surname" size=20 name="textbox2">
</form></td><td>
ColumnC<form name="form3">
<input type="text" value="E-mail" size=40 name="textbox3">
</form></td></tr>
</table>

You can also use CSS to format it.

mson77

08-16-2008, 10:58 PM

Hello Avril,

I don't use "SIZE" because "size" defines the size of the input element in nunber of characters. Does not define the width of the td column.

Regards,

mson77

Avril

08-17-2008, 07:51 AM

It actually depends on what you require the boxes for. Is there any information to input in the boxes?

Using textarea will also allow you to adjust the size of the box, but again according to the font size you define. In any case, you would have to use fixed sizes if you are using text boxes or form input boxes.

If you put text or form boxes within td tags and if the boxes are larger than the the width of the td, they will expand the td.

oesxyl

08-17-2008, 08:16 AM

Hello Avril,

I don't use "SIZE" because "size" defines the size of the input element in nunber of characters. Does not define the width of the td column.

Regards,

mson77
I don't want to stress you about doctype, I have something new, validation, :)
attribute values must be quoted? VIPStepan allready explain the problem, the solution I guess is to have a id/class for joined column and style them as you wish.

regards

mson77

08-17-2008, 12:40 PM

Hello Srs,

thank you very much for your kind and dedicated attentions!

When I started my thread I didn't have noticed how my thread would be appreciated and replied.

I really appreciate a lot all of your comments... each one... each one giving and showing his pont of view to be as much as complete in term of how to find out the solution. Hello ALL... thank you very much!

BUT... my mistake in not double-quoting, and in not id/classing, and in not using tableless mode instead of the example presented... with sintax faults also. BUT if you allow I would like to back to the focus and point about the original subject for further readers here in this forum:

I have a tr with 5 columns and in css style I have definition like below:


td {
width: 20%;
}


</table>
<tr><td colspan="5">This is a row with 5 columns</td></tr>
<tr><td>column1</td>
<td>column2</td>
<td colspan="2">column3-4</td>
<td>column5</td>
</tr></table>

In example above the 3rd column (column3-4) does not give me 40% width unless write the definition as below:
<td colspan="2" style="width:40%;">column3-4</td>

This is the conclusion that I realized with "TwilightRealm" help.
THANKS to every ONE!!!

Regards,