Question

In the table below, the entire cells are hyperlinks. How can I make just the text in the cells hyperlinks? The corresponding CSS is also below.

Thanks in advance,

John

<?php
    echo "<table class=\"samplesrec\">";
    while ($row = mysql_fetch_array($result)) { 
        echo '<tr>';
        echo '<td class="sitename1"><a href="http://www.'.$row["url"].'">'.$row["title"].'</a></td>';
        echo '</tr>';
        echo '<tr>';
        echo '<td class="sitename2"><a href="http://www.'.$row["url"].'">'.$row["username"].'</a></td>';
        echo '</tr>';
        }
    echo "</table>";    

?>


table.samplesrec {
    position:absolute;
    left:300px;
    top:125px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif ;
    font-weight: normal;
    font-size: 16px;
    color: #000000;
    width: 1000px;
    table-layout:fixed;
    background-color: #FFFFFF;
    border: 2px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 2px;
    padding: 1px;
    text-decoration: none;
    vertical-align: text-bottom;    

}

table.samplesrec td {
   border: 2px solid #fff;  
   text-align: left; 
   height: 18px;
   overflow:hidden;

}

table.samplesrec td a{
   display: block;
   padding: 2px;
   color: #000000;
   text-decoration: none;
   overflow:hidden;
   height: 18px;
}

table.samplesrec td a:hover{
   background-color: #FFFFFF;
   display: block;
   padding: 2px;
   color: #FF0000;
   text-decoration: none;
   overflow:hidden;
   height: 18px;
}   

.sitename1 { width: 550px;
            overflow:hidden !important;
            color: #000000;
            vertical-align: 

}

.sitename2 { width: 50px;
            overflow:hidden !important;
            color: #793D00;
            font-size: 12px;
            font-weight: bold;
            height: 18px;
            padding-bottom: 18px;

}

Answer 1

Remove display:block from table.samplesrec td a and table.samplesrec td a:hover.