Apply border-radius to the group of columns in CSS

I'm having trouble applying border-radius to the column group in an HTML table. Is there a solution for this issue that allows me to maintain accessibility for the table view?

Is there a way to achieve border-radius on the column group while ensuring accessibility is still intact?

table{
  border-collapse: collapse;
  border-spacing: 30px;
}

td {
  padding: 5px;
}

colgroup > col.selected{
  border: 1.5px solid #2698d6;
  box-shadow: 0px 4px 31px rgba(96, 96, 96, 0.1);
  border-radius: 8px;
}
<table>
  <colgroup>
      <col span="1" class="selected" />
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
   <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

htmlcssreactjssasshtml-table

Answer №1

if you're interested in applying for TD, follow these steps:

table {
  border-collapse: separate;
  border-spacing: 0 16px;
}

tr td {
  border: 1px solid transparent;
  transition: all ease 0.3s;
  padding: 5px;
}

td {
  border-radius: 10px;

}

td:hover
{
  border: 1px solid green;
}
<body>
<table>
<tbody>
  <tr>
    <td>01</td>
    <td>02</td>
    <td>03</td>
    <td>04</td>
    <td>05</td>
    <td>06</td>
  </tr>
  <tr>
    <td>07</td>
    <td>08</td>
    <td>09</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</tbody>
</table>
</body>

Feel free to leave a comment if you have any questions!

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

Switch out the checkboxes in Material-Table for radio buttons instead

Currently utilizing the material-table to display data. My goal is to select one row at a time and pass that row's data to another component. Multi-row selection is not desired, so using radio buttons instead of checkboxes is the suggested solution. I ...

reactjsmaterial-uimaterial-table

Issues with tabbed navigation functionality in jQuery

I'm encountering some difficulties with the tabbed navigation I created using CSS. Essentially, when a button is clicked, it should remove the hidden class from one div and add it to the other. However, what actually happens is that the div which sho ...

javascriptjqueryhtml

Swap File Field for Picture Graphic - HTML/CSS

I am looking to enhance the appearance of my form by replacing the generic File Field with a more aesthetically pleasing Image Icon. If you click on this Camera Icon, it will open up a Browse window: For a demonstration, check out this JsFiddle link: htt ...

htmlcss

Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

I have integrated a horizontal scrolling date selector on my website, and it is functioning well. However, I am facing an issue while trying to change the CSS properties of a clicked date link using jQuery. Despite successfully firing the click event, I am ...

javascriptjqueryhtmlcss

What is the reason for the malfunction of this JavaScript code designed for a simple canvas operation?

I'm having trouble with the code below. It's supposed to display a black box on the screen, but for some reason it's not working properly. The page is titled Chatroom so at least that part seems to be correct... <html> <head> &l ...

javascripthtmlcanvas

Trouble sliding with Material UI Slider

I've encountered an issue with my Material UI slider - it doesn't slide when clicked and dragged. I followed one of the examples on the Material UI website (https://material-ui.com/components/slider/) and included an onChange function. The values ...

javascriptreactjsmaterial-ui

Is there a way to make a button on a single div only affect that specific div

I have a PHP query that echoes a div for each row in the table. I want the div to slide up and then, when the user clicks the "read more" button, the div slides down. However, since it is echoed in a loop, all the divs have the same IDs and classes. I wo ...

javascriptjqueryhtmlcss

Having trouble with button alignment in the header with Bootstrap 3?

Using Bootstrap 3 and looking to adjust the alignment of a star icon with the title in my HTML page. Here is the current setup: <p class="pull-right visible-xs"> <h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500 ...

htmlcsstwitter-bootstrap-3

React Native images failing to render at the same time

I have created a React Native app that loads images simultaneously from Supabase storage using a custom hook. The goal is to display these images in a list using SwipeListView: const fetchImages = async (recipes) => { if (!recipes) { return; ...

javascriptreactjsreact-nativesupabasereact-native-paper

What are some methods for utilizing jQuery or Javascript to dynamically modify CSS styles depending on the current URL?

I'm working on integrating a separate navigation area file with my content using PHP includes. I have this idea where I want the links in the navigation area to change color depending on the active page (current URL). Essentially, I need jQuery or Jav ...

javascriptjquerycss

Issue with Material UI v5: "spacing" property not found on custom theme object

My current setup involves using version 5 of material ui, where I have customized a theme and applied it to all my components. However, when trying to add padding to a paper element in one of my components based on the theme, I encountered the following e ...

reactjstypescriptmaterial-ui

Can an Angular application be developed without the use of the app-root tag in the index.html file?

I'm a newcomer to Angular and I'm trying to wrap my head around how it functions. For example, if I have a component named "login", how can I make Angular render it directly? When I try to replace the app-root tag with app-login in index.html, n ...

htmlangulartypescript

I'm interested in learning how to implement dynamic routes in Nexy.js using TypeScript. How can I

I have a folder structure set up like this: https://i.stack.imgur.com/qhnaP.png [postId].ts import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { pid } = router.query return <p>Post: {p ...

reactjstypescriptnext.js

Using AngularJS to update attributes in an HTML tag within a string

My string contains HTML tags : var str = "<div><p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src='urlAAA' height='400' width=&ap ...

javascripthtmlangularjs

Using R programming language to download PDF files from a website through web scraping

Looking for assistance in R coding to automatically download all the PDFs linked on this URL: . The goal is to save these PDFs into a designated folder. I've attempted the following script with guidance from , however, it's resulting in errors: l ...

htmlrjsonurlweb-scraping

How can I design a form that resembles the sign-in form used by Google?

Currently, I am in the process of creating a contact form for a website that is inspired by the design of Google's material sign-in form. I have successfully implemented an effect where clicking on the input field causes the label to change its posit ...

javascripthtmlcssmaterial-design

Merging ng-if conditions

I would like to find a way for my two ng-if conditions to work together instead of separately. I want to display only the last one if both are true. Currently, this is how my code looks: <div> <img ng-src="{{img(myColor)}}" ng-if="myColor" ...

htmlangularjsuser-interfaceng-showangular-ng-if

Steps for creating a fixed menu bar that remains stationary while scrolling

I am facing three challenges: When I hover over my menu links, I want them to become 'bold', but it causes the items on the right to move slightly. How can I prevent this movement? In regard to the dropdown menu on "Two", how can I ensure t ...

htmlcss

What is the method for incorporating text below font icons?

Having a bit of trouble here with my code snippet featuring 'font awesome' icons in circles. I'm looking to add text beneath each icon, but the alignment within the circle is proving to be a challenge. Check out the code in this link to see ...

htmlcss

What is the process for embedding a NextJS app within a different website?

I'm searching for alternative methods to embed a React/NextJS application within another application. Currently, my solution involves using an iframe and specifying the source as the execution of the React/Nextjs application. I've explored diff ...

javascriptreactjsiframenext.js