CODEWITHSUNDEEP
htmlcss
shet_tayyy
shet_tayyy

Reputation: 5755

Aligning a link with the width of the table

I've searched enough on this topic and finally arrived here. This is my code:

echo "<a href='sresult.php?pid=$pi&pname=$p&dep=$d'><table style='background-color: $colour; table-layout: fixed;'>"; ?>
                <tr>
                    <td><?php echo $arr['pid']; ?></td>
                    <td><?php echo $arr['pname']; ?></td>
                    <td><?php echo $arr['year']; ?></td>
                </tr>
        </table></a>

This is just a part of my actual code. And the css:

table {
            border: 2px solid black;
            border-radius: 10px;
            position: relative;
            top: 5px;
            left: 400px;
            bottom: 0;
            width: 60%;
        }

        td
        {
            text-align: center;
            margin: auto;
            font-size: large;
            color: whitesmoke;
            padding: 0 150px 0 150px;
        }

Webpage showing the problem

Now in the above image you can see the width of the table i.e the colored blocks. But since it is wrapped by anchor tag, the link extends from extreme left to extreme right of the browser. I want only the colored block to be the link and not the whole stripe. Any help would be appreciated.

http://jsfiddle.net/53Ssk/embedded/result/

Above is a jsfiddle of the modified code.

Upvotes: 0

Views: 48

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106048

Not too sure of final result expected,

but if it is to center a link you should reset display on <a> and use margin:auto;

Notice: this structure is valid with HTML5 doctype document, use it in your real page to validate it.

DEMO

Your CSS becomes :

a {
    width: 60%;
    margin:auto;
    display:block;
}
table {
    border: 2px solid black;
    border-radius: 10px;
    width: 100%;
    background-color: red; 
    table-layout: fixed;
}
td {
    text-align: center;
    font-size: large;
    color: whitesmoke;      
}

HTML used :

<a href="#">
   <table>
     <tr>
       <td>hey</td>
       <td>wassup</td>
       <td>people</td>
     </tr>
   </table>
</a>

Upvotes: 2

AlexTroy
AlexTroy

Reputation: 405

You cant do your markup that way. It is not valid. So to acheve the result you need to change some structure

HTML

<table>
    <tbody>
        <tr>
            <td><a href="same-href">Hey</a></td>
            <td><a href="same-href">wassup</a></td>
            <td><a href="same-href">people</a></td>
        </tr>
    </tbody>
</table>

CSS

table a {display:block;}

You can put 3 links but set the same link to it

Upvotes: 0

Related Questions