Wide space in between contents using <td> in php code

[genzedu777]

Hi all,

 

Recently, I have tried umpteen times to align my contents like the below example in red.

 

Faculty or Course:  HUMANITITES OF SOCIAL SCIENCES MAJOR IN PSYCHOLOGY

Results:                  A2

 

However as you can see in my attachment,

 

Faculty or Course: //Has a wide gap in between// HUMANITITES OF SOCIAL SCIENCES MAJOR IN PSYCHOLOGY

 

The reason maybe due to the <td> which I have set for them. So I am trying to close that 'wide gap' in between them. Is there any other way which I can achieve it? Should I still use <table>, <tr> and <td> coding? Thanks

 

 

<?php
if (mysqli_num_rows($data1) == 1) {
    // The user row was found so display the user data
    $row1 = mysqli_fetch_array($data1);


echo '<div id="panel2">';

	/***University***/

		echo '<table>';
			if (!empty($row1['uni1'])) {
				echo '<br/><tr><td class="row_header">' . $row1['uni1'] . '</td></tr>';

			if (!empty($row1['uni2'])) {
				echo '<tr><td class="label">Faculty or Course:</td><td>' . $row1['uni2'] . '</td></tr>';
			}
			if (!empty($row1['uni3'])) {
				echo '<tr><td class="label">Results:</td><td>' . $row1['uni3'] . '</td></tr>';
			}		
		}
		echo '</table>';



echo '</div>'; //End of Panel 2


  } //End of IF for $query1 and $data1 (Qualifications)
  else {
    echo '<p class="error">There was a problem accessing your profile.</p>';
  }	
?>

 

[attachment deleted by admin]

[haku]

This is the HTML forum - why are you posting PHP?

[DavidAM]

The problem is with the HTML.

 

The heading that you put in the first cell of the first row is making the entire column wider than you want it. Try forcing that heading to span both columns:

<tr><td class="row_header" colspan="2">' . $row1['uni1'] . '</td></tr>

That should allow the other cells to shrink.

 

If that does not work, you may have to remove that heading row and just use an <H1> or <H2> immediately above the table.

[trq]

This is the HTML forum - why are you posting PHP?

 

I moved it here. The question has everything to do with HTML and nothing to do with PHP (PHP Coding Help is where this thread was moved from).

[haku]

My apologies then on my last post.

 

OP - can you please post the HTML output of your PHP script for debugging?

[genzedu777]

Hi DavidAM,

 

It works now. Thanks.

 

Just another question, since it's working now, I would still like to close the gap further, there is still a slight gap between Faculty or Course: & HUMANITITES OF SOCIAL SCIENCES MAJOR IN PSYCHOLOGY

 

Current

Faculty or Course:        HUMANITITES OF SOCIAL SCIENCES MAJOR IN PSYCHOLOGY
Results:                        A2

 

Would like to achieve

Faculty or Course: HUMANITITES OF SOCIAL SCIENCES MAJOR IN PSYCHOLOGY
Results:                 A2

 

 

How do I do it? Thanks

 

[raknjak]

is there any width defined in the class .row_header{} ? All cells will use this width. If not, try playing with widths.

[genzedu777]

Hi raknjak,

 

I didn't get what you meant. To play with widths? Below are my html and css codes. Could you kindly advice? Thanks

 

 

HTML Code

echo '<div id="panel2">';

	/***University***/

		echo '<table>';
			if (!empty($row1['uni1'])) {
				echo '<br/><tr><td class="row_header" colspan="2">' . $row1['uni1'] . '</td></tr>';

			if (!empty($row1['uni2'])) {
				echo '<tr><td class="label">Faculty or Course:</td><td>' . $row1['uni2'] . '</td></tr>';
			}
			if (!empty($row1['uni3'])) {
				echo '<tr><td class="label">Results:</td><td>' . $row1['uni3'] . '</td></tr>';
			}		
		}
echo '</table>';
echo '</div>'; //End of Panel 2

 

 

CSS CODE

#panel2 table{
width: 100%;
border: 1px solid black;
}
#panel2 tr{
border: 1px solid black;
}
#panel2 td{
font: 13px Arial, Verdana, Tahoma, Helvetica, sans-serif;
color: #191919;
border: 1px solid black;
}
#panel2 td.row_header {
font: bold 16px Arial, Verdana, Tahoma, Helvetica, sans-serif;
color: #3F67A2;

[DavidAM]

I'm not a CSS guru, but I see you are setting the TABLE width to 100% in your CSS. This tells the browser to use the full width (of the containing element) for the table. Since you don't provide a width for the cells (columns), the browser is going to choose how wide to make each column. I think you might see slightly different widths on different browsers. My experience is that the browser chooses to "stretch" all columns to fill up the space.

 

I don't know how to tell the browser to use the minimum required space in a particular column; or to apply all "extra" space to a particular column. I'm not sure that it can be done at all.

 

You can remove the width specification from the table. Then the browser should make the cells just large enough for the contents. This will result in a table less than 100% wide, so if you leave the borders on, the table will not cover the entire DIV. Without the width specification, the table will not expand to more than 100% if the contents are too large; it would just cause word-wrap in the cells.