CODEWITHSUNDEEP
htmlcss
Forivin
Forivin

Reputation: 15488

Make a whole table a link

I have 3 tables and I want each table to be a link. This works pretty good so far, but for some reason I can't round the corners anymore afterwards.

This is what I want it to look like: http://jsfiddle.net/vRP63/2/

Here I tried to add links to each table: http://jsfiddle.net/vRP63/1/

What is wrong with this:

<a href="google.com">
  <table>
    <tbody>
      <tr>
        <td>abc</td>
        <td>def</td>
        <td>ghi</td>
      </tr>
    </tbody>
  </table>
</a>

By the way, I could get it work using onClick events. But I don't want to use any Javascript for this.

Upvotes: 0

Views: 89

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206007

Wrap your content inside a parent element

<div class="parent">
    <!-- content here -->
</div>

than do: http://jsfiddle.net/vRP63/5/

.parent a:first-of-type table {
    border-radius: 6px 6px 0px 0px;
}
.parent a:last-of-type table {
    border-radius: 0px 0px 6px 6px;
}

Additionally you might want to put http:// in your hrefs :)

Upvotes: 1

davidpauljunior
davidpauljunior

Reputation: 8338

Because each table is now the first of type in it's parent (<a>). So you need to target the <a> as the first and last of type:

a:first-of-type table {
  border-radius: 6px 6px 0px 0px;
}
a:last-of-type table {
  border-radius: 0px 0px 6px 6px;
}

http://jsfiddle.net/vRP63/4/

Upvotes: 2

Related Questions