Click on the entire table to be redirected to the specified link

Question

Click on the entire table to be redirected to the specified link

Currently, I am facing an issue with styling my tables as links. I have 3 tables and I want each table to be a clickable link. However, after implementing the links, I am unable round the corners of the tables.

I envision the final look to be similar to this example: http://jsfiddle.net/vRP63/2/

In one attempt, I added links to each table: http://jsfiddle.net/vRP63/1/

Below is the specific code snippet that seems to be causing the issue:

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

Although I was able to achieve the desired functionality using onClick events in JavaScript, I prefer not to use any Javascript for this purpose.

html css

Answer 1

Answer №1

Since each table is now the first of its type within its parent element (<a>), you must select the <a> as both the first and last of its 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/

Answer 2

Since each table is now the first of its type within its parent element (<a>), you must select the <a> as both the first and last of its 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/

Answer 3

Answer №2

Enclose your text within a main container

<div class="container">
    <!-- Your content goes here -->
</div>

Next, check out this example: http://jsfiddle.net/vRP63/5/

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

Also, remember to add http:// in your href attributes :)

Answer 4

Enclose your text within a main container

<div class="container">
    <!-- Your content goes here -->
</div>

Next, check out this example: http://jsfiddle.net/vRP63/5/

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

Also, remember to add http:// in your href attributes :)

Click on the entire table to be redirected to the specified link

Answer №1

Answer №2

Similar questions

Adjust the DOM based on the output of the function

Exploring the use of Shadow DOM in ContentEditable for securing text segments

When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

What's the best way to conceal the navbar while attempting to print the page?

Passing index value using navigateByUrl method

Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Styling tooltips using only css - Dealing with overflow issues

Verifying completed fields before submitting

How come when you add ({}+{}) it equals to "[object Object][object Object]"?

Learn how to dynamically disable a button based on the input state matching an email pattern!

Animate a dotted border with CSS

Conceal table rows with JQuery in html

What is the best way to style an icon in CSS?

Adjusting specific sections of a container in real-time

Is it necessary to treat headings within figure elements as document headings?

Utilize Boostrap to stylishly incorporate an image within a DIV using CSS

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

What causes the gap between a parent div and inner div in react components?

Bootstrap 5.3 does not allow custom background colors to take precedence

How can I create additional white space at the end of my webpage with CSS grid?