What is the process for setting a linear gradient border color on a table row's border?

Currently, I am attempting to apply a linear gradient border color to the table row. Below are the codes for the table:

td:first-child {
 border-left: 1px solid black;
 border-bottom-left-radius: 50px;
 border-top-left-radius: 50px;
}

td:last-child {
 border-right: 1px solid black;
 border-bottom-right-radius: 50px;
 border-top-right-radius: 50px;
}

td {
 padding-left: 4%;
 border-top: 1px solid black;
 border-bottom: 1px solid black;
}

I am mindful that I may need to specify separately for the first and last child as well as within the td class.

Despite my efforts on the table data (td), the code below does not achieve the desired result. It fills up the inner table data background rather than applying the border color:

td {
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 border: 1px solid transparent;
 border-radius: 100px;
 background-image: linear-gradient(white, white),
 linear-gradient(178.18deg, #fd749b -13.56%, #281ac8 158.3%);
 background-origin: border-box;
 background-clip: content-box, border-box;
}

Expected outcome: https://i.sstatic.net/ZKLVt.jpg

Answer №1

Give this a shot,

Here is a demonstration of how to style a table,

td:first-child {
 border-left: 1px solid black;
 border-bottom-left-radius: 50px;
 border-top-left-radius: 50px;
}

td:last-child {
 border-right: 1px solid black;
 border-bottom-right-radius: 50px;
 border-top-right-radius: 50px;
}
td {
 text-indent:5%;
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 border: 1px solid transparent;
 border-radius: 50px;
 background-image: linear-gradient(white, white),
 linear-gradient(178.18deg, #fd749b -13.56%, #281ac8 158.3%);
 background-origin: border-box;
 background-clip: content-box, border-box;
}
<table>
  <tr>
    <th>First</th>
    <th>Last</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Sam</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Turner</td>
    <td>30</td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Creating a new element caused the inline-block display to malfunction

Can someone explain why the createElement function is not maintaining inline-block whitespace between elements? Example problem First rectangle shows normal html string concatenation: var htmlString = '<div class='inline-block'...>&l ...

Scrolling on an iPhone's Div

When I tried to access a website () using my iPhone and other gadgets, I encountered an issue with scrolling through the content. Clicking on the "Insight" link at the top-left corner led me to another page. On a computer, I had no trouble scrolling smoo ...

Optimizing Material UI Themes: Adjusting the spacing between labels and inputs for improved design

Currently, I am in the process of updating my MUI themes using the overrides functionality. This is how my input field looks like: https://i.sstatic.net/OFAGf.png I am looking to increase the space between the label and the input field. Below is the co ...

The width of the Bootstrap tooltip changes when hovered over

Currently, I am facing a peculiar issue with my angular web-application. Within the application, there is a matrix displaying data. When I hover over the data in this matrix, some basic information about the object pops up. Strangely, every time I hover ov ...

Submenu in submenu not registering CSS hover events

Currently, on a website project that I'm developing, there is a submenu nested within another submenu. Interestingly enough, the level-2 submenu happens to be taller than its parent level-1 submenu. To control the visibility of these submenus, I' ...

Direct jQuery to redirect to a new page and reveal a hidden div

I am facing a situation where I have two web pages named index and results. The results.html page contains some hidden divs with the CSS property set to display: none. My goal is to navigate from the index page using a navigation menu and open the results ...

Custom CSS for the Google Maps Circle Object

Currently, I am utilizing the Google Maps Javascript API v3 Circle object to display circles on the map. I am interested in customizing the CSS of this circle by incorporating some CSS animations. Although I am aware that custom overlays can be used for t ...

What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

I'm currently working on a jQuery function that operates on the mousemove event. The goal is to have two images - one main image and one shadow image, with the shadow image reflecting movement based on mouse position. While everything is functioning p ...

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Is there a way to place a close button on the top right corner of a dialog box, partially inside and outside the dialog like shown in this image: I attempted using absolute positioning to achieve this, but that solution is not ideal. I want to position t ...

Delay the occurrence of a hover effect until the previous effect has finished executing

As I hover over an element, the desired animation is displayed while hiding other elements on the page. The challenge I'm encountering is that if I quickly hover over many divs, the animations queue up and hide the divs sequentially. I want only one ...

Issue with uneven spacing on both ends of the screen on mobile devices

I have successfully used a <div style="margin:0 auto; "> tag with the specified property, working perfectly. However, I added another <div> above and set the float as follows: .gallery-div{ background:url(images/gallery-bg.png) repeat-y; ...

What is the best way to maintain scrollbars on mobile devices?

I'm currently building a cross-platform application using Angular 4 that needs to work seamlessly on both mobile and desktop devices. Is there a special trick to prevent the scrollbars from disappearing when viewing this page on a mobile browser? I&ap ...

Is it unwise to conceal the horizontal scrollbar?

My webpage includes a jquery slideshow using the jquery circle plugin, featuring the "shuffle" option. var slideshow = $('#slider').cycle({ fx: 'shuffle', shuffle: { top: 0, left: 1300}, .... When the images move out ...

I am having trouble with the CSS and Bootstrap not being applied after printing

Once the submit button is clicked on the initial output page, the CSS styling disappears and only a simple default form page is displayed. This does not meet my requirements. Using inline CSS allows it to work, but external CSS does not. Can someone please ...

CSS Boxes Misaligned - Need Correcting

Feeling a bit frustrated with CSS at the moment, always getting tripped up by the little things. So here's my issue: I'm working on a design that requires 2 columns - one sidebar of 300px on the right, and the other column should fill the remaini ...

Tips for adjusting the alignment of numbers in an ordered list to the right

Check out the code snippet below: The list items are correctly aligned to the right, but the numbers are not. How can we adjust the CSS so that the numbers align properly on the right as well? ol { width: 15vw; } <ol style="text-align:right;"> ...

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

Alter the color scheme of the website depending on the information provided by the user on the previous page

On the previous page, I have created a form with a checklist containing options for colors: red, green, and blue. If the user selects red, the background color on the next page should change to red. If green is selected, the background color will be green ...

Steps to achieve overflowing text above the border-top just like with the border-bottom when setting the height to 0px

Can text be vertically aligned above the border-top in HTML when using height:0px, similar to how it can be done below the border-bottom? HTML: <ul id="experiment" style="background: #FFDD00;"> <li id="test1"><span class="v-align-bot"& ...

Issue with Bootstrap dropdown menu not showing up/functioning

I've spent the entire day trying to find a solution and experimenting with various methods, but I'm still unable to get it to work. The navbar-toggle (hamburger menu) shows up when the window is resized, but clicking on the button doesn't di ...