width css

timstring

I need a fresh set of eyes. This script is not responding to changes in the 'width: ' style.

echo '<table style = "margin:auto; border:2px solid blue; border-collapse:collapse">';
	echo '<tr  style="background-color:#73B0FF;">';
		echo '<th style = "width:30x; font-size:12px;"> Tech<br>Number:</th>';
		echo '<th style = "width:200px; font-size:12px;"> Name:</th>';
		echo '<th></th>';

	echo '<div style = "width:40px; font-size:12px;">';
	for ($counter=0; $counter<$NumMonth; $counter++)
		{
			echo '<th>'  . $W["$counter"] . '<br>' . $D["$counter"] . '</th>';
		}
		echo '</div>';

	echo '<th style = "width:50px;">Calls</th>';
	echo '<th style = "width:50px;">Work<br />Orders</th>';
echo "</tr>";

I believe that I'm overlooking something obvious and simple. Help!

bradgrafelman

Well for one, it'd be more beneficial if you posted the output of that PHP code (e.g. the raw HTML markup that gets sent to your browser) since this issue has nothing to do with PHP.

Second, which width are you trying to change? There are many instances of that attribute being specified using inline styles.

Third, why are you using inline styles at all? 🙂

Ashley_Sheridan

This looks suspiciously like it's formatted for an email, which would go some way to explaining why the styles are inline. The main issue I see though is that you're opening and closing an empty <th> tag, and then putting a <div> there with sub elements of <th>. That's not going to work, and it's no wonder that your browser is balking at the code.

timstring

Per suggestion, I got rid of the inline styles and came up with this:

th {
	width:50px; 
	font-size:12px; 
	text-align:center; 
	border:2px solid blue; 
	border-collapse:collapse;
}

The raw HTML code looks like this:

<table style = "margin:auto; border:2px solid blue; border-collapse:collapse">
  <tr  style="background-color:#73B0FF; border:2px solid blue; border-collapse:collapse">
<th> Tech<br>Number:</th>
		<th style = "width:100px;"> Name:</th>
		<th />


  <th>Mon<br>5-11</th>
    <th>Tues<br>5-12</th>
      <th>Wed<br>5-13</th>
        <th>Thur<br>5-14</th>
          <th>Fri<br>5-15</th>
            <th>Sat<br>5-16</th>
              <th>Sun<br>5-17</th>

<th>Calls</th>
<th>Work<br />Orders</th>
</tr>

this fiddles -- http://jsfiddle.net/JBVKq/2/

However, when I put in the PHP code, the widths are ignored.

echo '<table style = "margin:auto; border:2px solid blue; border-collapse:collapse">';
	echo '<tr  style="background-color:#73B0FF">';
		echo '<th> Tech<br>Number:</th>';
		echo '<th style="width:150px"> Name:</th>';
		echo '<th />';


			for ($counter=0; $counter<$NumMonth; $counter++)
				{
					echo '<th>'  . $W["$counter"] . '<br>' . $D["$counter"] . '</th>';
				}


	echo '<th>Calls</th>';
	echo '<th>Work<br />Orders</th>';
echo "</tr>";

Here's a clue I just latched onto: I am setting up the code on a 13" MacBook Pro. The table goes from edge to edge. When I look at the page on a 17" screen on a winders box, the table goes edge to edge. The fiddle also runs from edge to edge.

Am I just nuts? Wait, don't answer that.

Ashley_Sheridan

You said the raw HTML looks like this, then you say it changes when you add the PHP. Either that is the HTML or it is not? What is the HTML that you get as the final result? Just view the source.

As an aside, I'd avoid self closing tags for table heading elements. Unless you get the doctype right, browsers can and will mangle your code into what it thinks you intended.

Lastly, if you say the table goes edge to edge no matter the screen, do you perhaps have a style set on the table that is setting the width to 100%? Check in a browser inspector tool (Fx or Chrome) or use something like Firebug.

timstring

Well, I found the problem. The problem is not that the column widths weren't changing; I simply ran out of pixels. When I view the page on my 21" iMac, the table expands until the window exceeds 19" wide, then the table responds properly to changes in column width.

johanafm

In that case, maybe you should set different styles for width >= res-X and width < res-X respectively? Or set a fixed min-width for body to fit what you need and have users with less than resolution X scroll horizontally.

Also note that the issue has nothing to do with the screen size in inches. It's all about the number of pixels on the x-axis that matter.

cretaceous

you also have an extra </th>

echo '<th style="width:150px"> Name:</th>';
echo '<th />';