Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2012
    Thanked 0 Times in 0 Posts

    PHP and Tables. How do I..

    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).

    PHP Code:
    <style>td {
    border-bottom:1px solid #000;
    tr:hover {

    tr:hover td {
    PHP Code:
    $down  ;
    $j=1$j <= $down  $j++){
    '<tr title="You are looking at Row ' $down '" >';
    $i=1$i <= $across$i++){
    "<td>Row $j Cell $i</td>";

    Any ideas?
    Last edited by john6; 09-29-2012 at 07:56 AM.

  2. #2
    Master Coder
    Join Date
    Feb 2011
    Your Monitor
    Thanked 615 Times in 601 Posts
    Quote Originally Posted by john6 View Post
    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.
    Quote Originally Posted by deathshadow View Post
    So seriously, loosen up that tie, let out the belt, and try relating to normal people on the street instead of the gentleman's club crowd.

  3. #3
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,013 Times in 1,010 Posts
    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.

        $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">
    	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;


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts