14 replies [Last post]
YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

Hi there, ... please help ... lost dayssssss on this issue.

I would like my table column to autosize its contents.

I did actually autosize the headers to all columns to its contents.

I have tested all possible combinations of on the TD selector with no success.

Take a look at the RANG column (sorry it is french) on the right. The size of the column is 1, the heading is, in this case 4. The heading container has already been expanded to the size of the TD container but this container should be 1. When this will work, the th container will be 4 and not current width.

... problems I am having is that everything was fine few days ago and while 'playing' with the html code, everything got lost.

here is my CSS code and attached a print screen of my web page (sorry everything is local)

table {
	background: #c2cadd;
	border-collapse:separated;
	margin:5px; 
	border:5px solid #946f00;
	padding: 5px; 
	table-layout: auto;
	display: table;
	}
 
table caption { 
	border: solid #946f00;	border-width: 5px;	background: #ede6ca;
							font-size: 14px;	color:#946f00;	text-align: center;	font-variant: normal;	font-style: italic;	font-weight: bold;	font-family: georgia,garamond,serif;	text-transform:uppercase;
}
* html table caption {
	border:1px solid #09c;
	}
tbody td input	{font-size: 12px;	color:#946f00;	text-align: left;	font-variant: normal;	font-style: italic;	font-weight: bold;	font-family: georgia,garamond,serif;}
thead th input	{width:100%;		font-size: 14px;	color:#946f00;	text-align: center;	font-variant: normal; font-style: italic;	font-weight: bold;	font-family: georgia,garamond,serif;}
 
table tr td, table tr th  {
	border:2px solid #09c;
	}
thead tr th {
	border-left:	2px solid #999;
	border-right :	2px solid #ccc;
	border-top:	2px solid #ccc;
	border-bottom:	2px solid #999;
	padding :	[geshifilter-code]
5px; } .tdhidden {display:none;} /* tr {width: 100%;} */ /* tbody td {width: 100%;} */[/geshifilter-code]

//mod edit: Code tags added ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hi YO

Please read the posting guidelines in the sticky topics at the top of each forum. We need to see your html also.

cheers,

gary - in mod mode

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

<form method="post"

<form method="post" action="league_team_player.php">
<table><caption>Repêcher les Joueurs de votre Équipe</caption>
<tr>
<td valign="top" align="center"> 
<table><caption>Joueurs Disponibles</caption>
<thead>
<tr><th>				<input	name="TH1LastName"			type="submit"						value="Nom"												 					></th>
	<th>				<input	name="TH1Role"				type="submit"						value="Position"															></th>
	<th>				<input	name="TH1Level"				type="submit"						value="Niveau A-B-C-D"														></th>
	<th>				<input	name="THRegister"			type="submit"						value="&#10004"									 							></th></tr>
</thead>
<tbody>
<?php					for	($i = 0;	$i	< $_POST['Array1TOT'];	$i++)					{?>
<tr><td>				<input	name="LastName1[]"			type="text"							value="<?echo	$_POST['LastName1']			[$i], ", ", 
																												$_POST['FirstName1']		[$i];	?>"	readonly="readonly"	></td>
	<td>				<input								type="text"							value="<?for	($j = 0; $j < $TBRoleNum; $j++)				
						{if ($_POST['Role1'] 	[$i] == mysql_result($TBRole,$j,"Role")) 		{echo mysql_result($TBRole,$j,"Description");}}		?>"	readonly="readonly"	></td>
	<td>				<input								type="text"							value="<?for	($j = 0; $j < $TBLevelNum; $j++)				
						{if ($_POST['Level1']	[$i] == mysql_result($TBLevel,$j,"Level")) 		{echo mysql_result($TBLevel,$j,"Description");}}	?>"	readonly="readonly"	></td>
	<td>				<input	name="Select1[]" 			type="checkbox"						value="<?echo 	$_POST['Code1']				[$i],
																												$_POST['Role1']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Code1[]"				type="hidden"						value="<?echo 	$_POST['Code1']				[$i], 
																												$_POST['Role1']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Player1[]" 			type="hidden"						value="<?echo 	$_POST['Player1']			[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Role1[]"	 			type="hidden"						value="<?echo 	$_POST['Role1']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="FirstName1[]" 		type="hidden"						value="<?echo 	$_POST['FirstName1']		[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="LastName1[]" 			type="hidden"						value="<?echo 	$_POST['LastName1']			[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Cell1[]" 				type="hidden"						value="<?echo 	$_POST['Cell1']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Home1[]" 				type="hidden"						value="<?echo 	$_POST['Home1']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Office1[]" 			type="hidden"						value="<?echo 	$_POST['Office1']			[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="EMail1[]" 			type="hidden"						value="<?echo 	$_POST['EMail1']			[$i];	?>"						></td></tr>
<?php																						}?>
						<input	name="Array1TOT" 			type="hidden"						value="<?echo 	$_POST['Array1TOT'];?>"										>
</tbody>
</table></td>
<td valign="top" align="center"> 
<table><caption>Joueurs de votre Équipe</caption>
<thead>
<tr><th>				<input	name="THRegister"			type="submit"						value="&#10004"																></th>
		<th>			<input	name="TH2LastName"			type="submit"						value="Nom"																	></th>
		<th>			<input	name="TH2Role"				type="submit"						value="Position"															></th>
		<th>			<input	name="TH2Level"				type="submit"						value="Niveau A-B-C-D"														></th>
		<th>			<input	name="TH2DraftSEQ"			type="submit"						value="Rang"																></th></tr>
</thead>
<tbody>
<?php						for	($i = 0;	$i	< $_POST['Array2TOT'];	$i++)				{?>
<tr>
<?if	($_POST['Message'] [$i] != null)	 	{	?>
	<td>				<input	name="Message[]"			type="text"							value="<?echo	$Array[$i]["Message"];?>"									></td>
<?}else											{	?>
	<td>				<input	name="Select2[]"			type="checkbox"						value="<?echo	$_POST['Code2']				[$i];	?>"						></td>
<?												}	?>
	<td>				<input								type="text"							value="<?echo	$_POST['LastName2']			[$i], ", ", 
																												$_POST['FirstName2']		[$i];	?>"	readonly="readonly"	></td>
	<td>				<input								type="text"							value="<?for	($j = 0; $j < $TBRoleNum; $j++)	
						{if ($_POST['Role2'] 	[$i] == mysql_result($TBRole,$j,"Role")) 		{echo mysql_result($TBRole,$j,"Description");}}		?>"	readonly="readonly"	></td>
	<td>				<input								type="text"							value="<?for	($j = 0; $j < $TBLevelNum; $j++)
						{if ($_POST['Level2'] 	[$i] == mysql_result($TBLevel,$j,"Level")) 		{echo mysql_result($TBLevel,$j,"Description");}}	?>"	readonly="readonly"	></td>
	<td>				<input	name="DraftSEQ2[]"			type="text"							value="<?echo	$_POST['DraftSEQ2']			[$i];	?>"	readonly="readonly"	></td>
	<td class=tdhidden>	<input	name="Code2[]"				type="hidden"						value="<?echo 	$_POST['Code2']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Player2[]"			type="hidden"						value="<?echo 	$_POST['Player2']			[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Role2[]"				type="hidden"						value="<?echo 	$_POST['Role2']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="FirstName2[]" 		type="hidden"						value="<?echo 	$_POST['FirstName2']		[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="LastName2[]" 			type="hidden"						value="<?echo 	$_POST['LastName2']			[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Cell2[]" 				type="hidden"						value="<?echo 	$_POST['Cell2']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Home2[]" 				type="hidden"						value="<?echo 	$_POST['Home2']				[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="Office2[]" 			type="hidden"						value="<?echo 	$_POST['Office2']			[$i];	?>"						></td>
	<td class=tdhidden>	<input	name="EMail2[]" 			type="hidden"						value="<?echo 	$_POST['EMail2']			[$i];	?>"						></td></tr>
<?php																					}	?>
						<input	name="Array2TOT"			type="hidden"						value="<?echo	$_POST['Array2TOT']				;	?>"						>
</tbody>
</table></td>
</tr></table>
</form>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'm not completely sure of

I'm not completely sure of what it is you want, but I'll plunge in anyway.

You have this:thead th input {width: 100%;}; delete the width property.

For your td inputs that have restricted content, for example a single digit, set the size attribute.

                  <td> 
		    <input type="text" 
              		   value="3"
			   readonly="readonly"
			   size="1"></td>

In your thead row, be sure to have as many th elements as there are td elements. Use the colspan attribute, e.g.

	      <thead>
		<tr>
		  <th> 
		    <input name="THRegister" 
			   type="submit"
			   value="&#10004" ></th>
 
		  <th> 
		    <input name="TH2LastName" 
			   type="submit"
			   value="Nom" ></th>
 
		  <th> 
		    <input name="TH2Role" 
			   type="submit"
			   value="Position" ></th>
 
		  <th> 
		    <input name="TH2Level" 
			   type="submit"
			   value="Niveau A-B-C-D" ></th>
 
		  <th> 
		    <input name="TH2DraftSEQ" 
			   type="submit"
			   value="Rang" ></th>
 
		  <!-- th added to fill column count -->
		  <th colspan="99"></th>
		</tr>
	      </thead>

Do these help?

When posting source, we need to see the html that the browser sees. Open the page in your browser, view source and copy. For large tables, delete all but one or two rows. Substitute typical content if you need to.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

Hi, ... thanks for your

Hi,

... thanks for your reply.

What I want is the columns to automatically autosize according to their contents to see as much information in the page without having to scroll left or right.

You may have noticed that all (type=text) columns but the one with check mark (type=checkbox) have the same width. If the RANG column would take the minimum size (1 but 4 since the heading covers 4 bytes of that column + margin, etc...) this would give more room for longer names in NOM column. So I want to squeeze each column to minimum width according to its content.

... like I wrote previously, it works one day and stop working another day but I do not have a clue what I have changed. Please note that I have around 20 pages that work that way so I do not think this is an html issue since I have not changed the html code in some pages that are using the same CSS style file and the same problem occured.

So, this is the CSS file.

According to searches I have made on the internet, to have the column size to autofit, we do not need WIDTH in any of the table, tr, td, th ... I have tried it but it did not work.

I will re-structure one of my web page according to your suggestion anyway and I will let you know.

Thanks again ... I will come back to you.

P.S.: I also do have issue with inherited HTML Selector VS childs such as table tr th input VS table tr td input ... the font-size, etc... is accepted in the first one but not in the second. I have duplicated the classes on the second one to make it works but this is a small issue ... my client does not see that !!

Bye.

YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

Hi again, ... I did the

Hi again,

... I did the changes with same results in the td rows of the RANG column. Attached is a print screen and updated code.

1) number of th columns = number of td columns (I have removed the class=thhidden and remove the TD-/TD and kept the input (again here I had done that to go around another issue but now that I have removed it ... the issue did not come back ... life mystery again !!)

2) I have remove the WIDTH=100% ... it squeezed the heading RANG to 4 bytes + marging, border, etc... and did the same for all other columns (see print screen) BUT THIS IS NOT WHAT I WANT ... see the first print screen for the headings.

3) eventhough (not sure this is english expression !), the TD columns have been kept to equal width across my page even if their contents are smaller.

I am posting my updated code, html without PHP and html doctype,head, body section surroungding the page, etc... and the CSS files (hoping I am doing this by the rule !).

include 'hockey_league_top.php';
?> 
<form method="post" action="league_team_player.php">
<table><caption>Repêcher les Joueurs de votre Équipe</caption>
<tr>
<td valign="top" align="center"> 
<table><caption>Joueurs Disponibles</caption>
<thead>
<tr><th>				<input	name="TH1LastName"			type="submit"						value="Nom"												 					></th>
	<th>				<input	name="TH1Role"				type="submit"						value="Position"															></th>
	<th>				<input	name="TH1Level"				type="submit"						value="Niveau A-B-C-D"														></th>
	<th>				<input	name="THRegister"			type="submit"						value="&#10004"									 							></th>
</tr>
</thead>
<tbody>
<?php					for	($i = 0;	$i	< $_POST['Array1TOT'];	$i++)					{?>
<tr><td>				<input	name="LastName1[]"			type="text"							value="<?echo	$_POST['LastName1']			[$i], ", ", 
																												$_POST['FirstName1']		[$i];	?>"	readonly="readonly"	></td>
	<td>				<input								type="text"							value="<?for	($j = 0; $j < $TBRoleNum; $j++)				
						{if ($_POST['Role1'] 	[$i] == mysql_result($TBRole,$j,"Role")) 		{echo mysql_result($TBRole,$j,"Description");}}		?>"	readonly="readonly"	></td>
	<td>				<input								type="text"							value="<?for	($j = 0; $j < $TBLevelNum; $j++)				
						{if ($_POST['Level1']	[$i] == mysql_result($TBLevel,$j,"Level")) 		{echo mysql_result($TBLevel,$j,"Description");}}	?>"	readonly="readonly"	></td>
	<td>				<input	name="Select1[]" 			type="checkbox"						value="<?echo 	$_POST['Code1']				[$i],
																												$_POST['Role1']				[$i];	?>"						></td>
						<input	name="Code1[]"				type="hidden"						value="<?echo 	$_POST['Code1']				[$i], 
																												$_POST['Role1']				[$i];	?>"						>
						<input	name="Player1[]" 			type="hidden"						value="<?echo 	$_POST['Player1']			[$i];	?>"						>
						<input	name="Role1[]"	 			type="hidden"						value="<?echo 	$_POST['Role1']				[$i];	?>"						>
						<input	name="FirstName1[]" 		type="hidden"						value="<?echo 	$_POST['FirstName1']		[$i];	?>"						>
						<input	name="LastName1[]" 			type="hidden"						value="<?echo 	$_POST['LastName1']			[$i];	?>"						>
						<input	name="Cell1[]" 				type="hidden"						value="<?echo 	$_POST['Cell1']				[$i];	?>"						>
						<input	name="Home1[]" 				type="hidden"						value="<?echo 	$_POST['Home1']				[$i];	?>"						>
						<input	name="Office1[]" 			type="hidden"						value="<?echo 	$_POST['Office1']			[$i];	?>"						>
						<input	name="EMail1[]" 			type="hidden"						value="<?echo 	$_POST['EMail1']			[$i];	?>"						>
</tr>
<?php																						}?>
						<input	name="Array1TOT" 			type="hidden"						value="<?echo 	$_POST['Array1TOT'];?>"										>
</tbody>
</table></td>
<td valign="top" align="center"> 
<table><caption>Joueurs de votre Équipe</caption>
<thead>
<tr><th>				<input	name="THRegister"			type="submit"						value="&#10004"																></th>
	<th>				<input	name="TH2LastName"			type="submit"						value="Nom"																	></th>
	<th>				<input	name="TH2Role"				type="submit"						value="Position"															></th>
	<th>				<input	name="TH2Level"				type="submit"						value="Niveau A-B-C-D"														></th>
	<th>				<input	name="TH2DraftSEQ"			type="submit"						value="Rang"																></th>
</tr>
</thead>
<tbody>
<?php						for	($i = 0;	$i	< $_POST['Array2TOT'];	$i++)				{?>
<tr>
<?if	($_POST['Message'] [$i] != null)	 	{	?>
	<td>				<input	name="Message[]"			type="text"							value="<?echo	$Array[$i]["Message"];?>"									></td>
<?}else											{	?>
	<td>				<input	name="Select2[]"			type="checkbox"						value="<?echo	$_POST['Code2']				[$i];	?>"						></td>
<?												}	?>
	<td>				<input								type="text"							value="<?echo	$_POST['LastName2']			[$i], ", ", 
																												$_POST['FirstName2']		[$i];	?>"	readonly="readonly"	></td>
	<td>				<input								type="text"							value="<?for	($j = 0; $j < $TBRoleNum; $j++)	
						{if ($_POST['Role2'] 	[$i] == mysql_result($TBRole,$j,"Role")) 		{echo mysql_result($TBRole,$j,"Description");}}		?>"	readonly="readonly"	></td>
	<td>				<input								type="text"							value="<?for	($j = 0; $j < $TBLevelNum; $j++)
						{if ($_POST['Level2'] 	[$i] == mysql_result($TBLevel,$j,"Level")) 		{echo mysql_result($TBLevel,$j,"Description");}}	?>"	readonly="readonly"	></td>
	<td>				<input	name="DraftSEQ2[]"			type="text"							value="<?echo	$_POST['DraftSEQ2']			[$i];	?>"	readonly="readonly"	></td>
						<input	name="Code2[]"				type="hidden"						value="<?echo 	$_POST['Code2']				[$i];	?>"						>
						<input	name="Player2[]"			type="hidden"						value="<?echo 	$_POST['Player2']			[$i];	?>"						>
						<input	name="Role2[]"				type="hidden"						value="<?echo 	$_POST['Role2']				[$i];	?>"						>
						<input	name="FirstName2[]" 		type="hidden"						value="<?echo 	$_POST['FirstName2']		[$i];	?>"						>
						<input	name="LastName2[]" 			type="hidden"						value="<?echo 	$_POST['LastName2']			[$i];	?>"						>
						<input	name="Cell2[]" 				type="hidden"						value="<?echo 	$_POST['Cell2']				[$i];	?>"						>
						<input	name="Home2[]" 				type="hidden"						value="<?echo 	$_POST['Home2']				[$i];	?>"						>
						<input	name="Office2[]" 			type="hidden"						value="<?echo 	$_POST['Office2']			[$i];	?>"						>
						<input	name="EMail2[]" 			type="hidden"						value="<?echo 	$_POST['EMail2']			[$i];	?>"						>
</tr>
<?php																					}	?>
						<input	name="Array2TOT"			type="hidden"						value="<?echo	$_POST['Array2TOT']				;	?>"						>
</tbody>
</table>
</td>
</tr></table>
</form>
<?php include 'hockey_league_bottom.php';?>

table 				{
	background		: #c2cadd;
	border-collapse	: separated;
	margin			: 5px; 
	border			: 5px 5px 2px 5px solid #946f00;
	padding			: 5px; 
	table-layout	: auto;
	display			: table;
/**/
	color			: #946f00;
	text-align		: center;
	font-variant	: normal;
	font-style		: italic;
	font-weight		: bold;
	font-family		: georgia,garamond,serif;
					}
table caption			{ 
	background		: #ede6ca;
	border			: solid #946f00;
	border-width	: 5px;
/**/
	font-size		: 16px;
	text-transform	: uppercase;
					}
thead tr th 			{
	border-left		: 3px solid #999;
	border-right	: 3px solid #ccc;
	border-top		: 3px solid #ccc;
	border-bottom	: 3px solid #999;
	padding			: 3px; 
					}
thead tr th input		{
/*	width			: 100%;*/
	font-size		: 14px;
	text-align		: center;
					}
tbody tr				{
	width			: 100%;
					}
tbody tr td		   	{
	border			: 2px solid #09c;
					}
tbody td input			{
	font-size		: 12px;	color:#946f00;	text-align: left;	font-variant: normal;	font-style: italic;	font-weight: bold;	font-family: georgia,garamond,serif;}
.tdhidden			{
	display			: none;
					}

YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

... forgot the print screen

... forgot the print screen Untitled_0.jpg

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

tables

Tables and their cells shrink-wrap content by default. The issue you have is related to the input[type=text] form controls. The default width of a column will be determined by the widest content in that column. Input[type=text] elements default to width="20", where the value is the number of characters and do not resize themselves.

W3C, html4.01 §17.4 The INPUT element wrote:

size = cdata [CN]
This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.

If you want narrower columns, you will need to specify a width appropriate to its expected content.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

Hi Gary, ... thanks again ...

Hi Gary,

... thanks again ... but ... there must be a solution somewhere since, as I wrote, it was working 5 days ago.

You will see in this new print screen, what I am expecting and currently have in production.

I am converting this application to HTML5 and I took the initiative to re-desing the looking of it. I had played a few days with it and was able, as I said, to re-generate it with 'flexible' columns without, as you suggest, adding an approximate width.

I tested it, that time, with a very long name (NOM) such as for the first column and all other columns kept being squeezed and got *beep* to the right even forcing me to shift right and left to be able to see all colums for the whole table.

I will keep on play with it for a few days (I am very patient) ... and let you know.

It seems there is something wrong with following code (TD INPUT and TH INPUT foreground) that I will investigate and maybe, that could be the root case of all problems. They are not reacting the same ways and I had to add again the font family, etc... to have my column headers and details having the same font family.

thead tr th input {
/* width : 100%; */
font-size : 14px;
text-align : center;
}
tbody tr {
/* width : 100%; */
}
tbody tr td {
border : 2px solid #09c;
}
tbody td input {
font-size : 12px; color:#946f00; text-align: left; font-variant: normal; font-style: italic; font-weight: bold; font-family: georgia,garamond,serif;}

AttachmentSize
Untitled.jpg 505.4 KB
YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

Got the root cause !!!

Gary,

... YES, it is the TD / TH CSS coding !!!

... I am working on a solution and let you know.

Ciao.

YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

Help me again ...

Gary,

... it does not work at all.

I have changed my html to its minimum, and removed CSS code one line after the others, up to having no CSS line and got the same issue even if the internet says what I am expecting ... see

http://www.w3schools.com/cssref/pr_tab_table-layout.asp and lots of other links.

here is my html code and picture of target solution:

<!DOCTYPE html>
<html>
<head>
<title>Hockey</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="hockey table2.css"		rel="stylesheet"	type="text/css">
</head>
<body>
<form method="post" action="test.html">
<table>
<tr><th>				<input								type="text"							value="Nom"								 					></th>
	<th>				<input								type="test"							value="Position"											></th>
	<th>				<input								type="text"							value="Niveau A-B-C-D"										></th>
</tr>
<tr><td>				<input								type="text"							value="Jean-Francois Desjardins-Dupere-Tetreault"			></td>
	<td>				<input								type="text"							value="avant"												></td>
	<td>				<input								type="text"							value="Pro"													></td>
</tr>
<tr><td>				<input								type="text"							value="Guy Lafleur"											></td>
	<td>				<input								type="text"							value="Defense"												></td>
	<td>				<input								type="text"							value="Inter"												></td>
</tr>
<tr><td>				<input								type="text"							value="Gary Carter"											></td>
	<td>				<input								type="text"							value="Goalie"												></td>
	<td>				<input								type="text"							value="Junior"												></td>
</tr>
<tr><td>				<input								type="text"							value="Mario Tremblay"										></td>
	<td>				<input								type="text"							value="Defense"												></td>
	<td>				<input								type="text"							value="Inter"												></td>
</tr>
<tr><td>				<input								type="text"							value="Pedro Martinez"										></td>
	<td>				<input								type="text"							value="Left Wing"											></td>
	<td>				<input								type="text"							value="Inter"												></td>
</tr>
</table>
</form>
</body>
</html>

Untitled_1.jpg

YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

root cause

Untitled_2.jpgGary,

... as you said, the input text field is the problem.

I took the same example as before, removed input text and leaved the value of the input form between the TD and /TD and the result is what I want ... see attached.

2 questions: why it was working with input fields 5 days ago (this I do not have a clue on what I have done to make it happen nor what made it not working) and why it is working using html4 ?

Any idea ?

Thanks.

<!DOCTYPE html>
<html>
<head>
<title>Hockey</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="html2.css"		rel="stylesheet"	type="text/css">
</head>
<body>
<table>
<tr><th>Nom								 				</th>
	<th>Position											</th>
	<th>Niveau A-B-C-D										</th>
</tr>
<tr><td>Jean-Francois Desjardins-Dupere-Tetreault			</td>
	<td>avant												</td>
	<td>Pro												</td>
</tr>
<tr><td>Guy Lafleur										</td>
	<td>Defense											</td>
	<td>Inter												</td>
</tr>
<tr><td>Gary Carter										</td>
	<td>Goalie												</td>
	<td>Junior												</td>
</tr>
<tr><td>Mario Tremblay										</td>
	<td>Defense											</td>
	<td>Inter												</td>
</tr>
<tr><td>Pedro Martinez										</td>
	<td>Left Wing											</td>
	<td>Inter												</td>
</tr>
</table>
</body>
</html>

td{border: 1px solid black;}
th{border: 1px solid black;}
 *.autolayout	{table-layout:auto;}
 *.auto			{width:auto;}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

To the best of my knowledge;

I'm pretty sure you're stuck with the input elements controlling the column width. Even if you set the width of each td/th, and therefore the column, to 1px, the cells would still expand to contain the input at the default 20 characters or whatever you set for the input size attribute.

See http://www.w3.org/TR/CSS2/tables.html#columns

Quote:

'width'
The 'width' property gives the minimum width for the column.

Emphasis added.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

YO-TECH
YO-TECH's picture
Offline
Regular
Last seen: 9 years 8 weeks ago
Timezone: GMT-4
Joined: 2012-11-14
Posts: 13
Points: 16

... then the next step

Hi again,

... o.k. I gave up even if I am sure that I was able to do so 1 week ago. I can go back to HTML4 to get it as I want but I would loose something else.

Since my web site is full of tabular information, what would you suggest to change all my table to:

1) usage of DIV and simulate table structure with CSS

OR

2) swich to JQUERY

Merci.

Bye.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Neither

Using regular html containers to simulate tables has serious contra-indications. The table element has special meaning; the rows (records) and the tds (fields) have positional relationships that other containers will not have. That means a faux table cannot be machine parsed without a whole bunch of not-easy coding. Likewise, assistive technologies (e.g. screen readers) will fail to treat the records properly.

It is my opinion — not at all a humble one — that javascript should be limited to bells and whistles. The base page should be complete, understandable, and usable on its own. I am in a shrinking minority on that.

Were I coding this, I wouldn't use forms within the tables. I'd put a button link at one end of each record that would request a form to edit that record.

If you do need to stay with input controls, I would not consider it onerous to apply reasonable size attributes to those inputs. Don't forget that some of those fields will have a very limited number of valid values. For example, in American football, all positions can be, and usually are, represented by abbreviations taking from one to three characters, i.e. c, og, ot, te, wr, qb, fb, hb, dt, de, olb, mlb, cb, ss, fs, k, and p. For those values not so limited, javascript could help, the name field for example. "Joe Blow" is no problem, but "Jean-Francois Desjardins-Dupere-Tetreault" is a little over the top. The 20 character size will let that name overflow and can be read by giving focus and using the arrow keys. You could use javascript to check the number of characters, and if too many, set the title attribute to the value. Then hovering the pointer over the control would cause a pop-up box. That could be done more robustly at the mid-tier on the server, though.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.