PHP and Tables. How do I..

[john6]

Hi, I have a few problems which I'm not sure how to fix..

1) Firstly, there's a tiny gap in between the 'border-bottom' line from one cell to the next.

2) I need only the text to glow orange on the specific cell your mouse is on and also, show a hover message relating to the individual cell - rather than the entire row.

3) I need the width of the table column to be just a tad bigger than the text inside it (so it's not too cramped), but, if the text is too long I want it to cut the text (to prevent extreme stretching of the table).



STYLE:

PHP Code:

<style>td {
    width: 8em;
    line-height: 2em;
    background-color: #fff;
    font-weight: bold;
    border-bottom:1px solid #000;
    
}
tr:hover {
    color: #FFE600;
    background-color: #7500d4;
}

tr:hover td {
    background-color: transparent;
}</style> 


PHP TABLES

PHP Code:

<?php
    $across= 5 ;
    $down  = 4 ;
    
    echo '<table>';
    for($j=1; $j <= $down  ; $j++){
        echo '<tr title="You are looking at Row ' . $down . '" >';
        for($i=1; $i <= $across; $i++){
            echo "<td>Row $j Cell $i</td>";
        }
        echo "</tr>";
    }
    echo "</table>";
?>

Any ideas?

[tangoforce]

Originally Posted by john6

Any ideas?

Yes. Ask in the html / javascript forums. This isn't a php issue but a html / javascript / client side / design issue.

What you need to do is just get it working in a plain html page and THEN break it up to put in your php code.

Your problem isn't php related but because you're using php to print parts of it out, you think it is. This is really a html / JS issue. PHP runs on the server. The effect you want to achieve runs in the users browser - client side via javascript.

[sunfighter]

1.) There's tiny gaps in between the bottom lines from one cell to the next for every line. That's because the vertical lines intersect them and change the pixel color at the junction. We can get away from this by using the table attribute 'rules' and then set the table style to have a border-bottom.

2.) color to change in hovered cell only = remove color from tr:hover, this leaves the row to turn purple. And add a td:hover with a color.

The tool tip always says your looking at row 4 because you used $down to define it and $down is set to be 4. Use the $j instead.

3.) The 'tad bigger than the text inside it' is easy to do. Remove a set width in the TD rules and add padding to give breathing room. But controlling the text limit by table rules is beyond me. It maybe possible but I don't know how. What I would do was put a limit on the text. To show that I have changed the for loop and included three $inside lines for you. play with em to see what I mean about cutting the string to a set length.

 <?php
    $across= 5 ;
    $down  = 4 ;

    echo '<table rules="rows">';
    for($j=1; $j <= $down  ; $j++){
        echo '<tr title="You are looking at Row ' . $j . '" >';
        for($i=1; $i <= $across; $i++){
			$inside = "Row $j Cell $i";
			//$inside = "Row $j Cell $i and a lot of jubberish text";
			//$inside = substr("Row $j Cell $i and a lot of jubberish text", 0, 12);
            $textline = "<td>$inside</td>";
			echo $textline;
        }
        echo "</tr>";
    }
    echo "</table>";
?>
<style type="text/css">
table{
	border-bottom: solid 1px black;
	width: 600px;
	overflow: hidden;
}
td {
    //width: 8em;
padding: .5em;      // ADDED
    line-height: 2em;
    background-color: #fff;
    font-weight: bold;
    //border-bottom:1px solid #000;

}
tr:hover {
    //color: #FFE600;
    background-color: #7500d4;
}
td:hover {
    color: #FFE600;
}
tr:hover td {
    background-color: transparent;
}
</style>