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

Steer clear of creating new pages within the pages directory

Is there a way to prevent nextJS from creating a route for a .js\jsx\tsx file within the /pages directory? I prefer to keep the file in that location, but I do not want it to be accessible through routing. The reasoning behind this is to mainta ...

reactjsnext.jsroutes

What is the best way to exclude React.js source files from a fresh Nest.js setup?

My setup includes a fresh Nest.js installation and a directory named "client" with a clean create-react-app installation inside. Here is the project structure: ./ ...some Nest.js folders... client <- React.js resides here ...some more Nest.js fo ...

javascriptreactjstypescriptnestjstsconfig

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

Is Bootstrap CSS cached by Chrome?

As I began a new project, I decided to tweak the color settings in bootstrap. During debugging in Visual Studio, everything appeared as intended. However, after publishing the site for the first time on a server, I noticed that the color change I made in ...

cssgoogle-chrome

AngularJS textbox failing to recognize line breaks as expected

I am struggling with the following HTML code: <div class="form-group"> <div class="input-group col-sm-12"> <label for="" class="control-label">Comments</label> ...

javascriptphphtmlangularjs

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Using jquery to create HTML elements but unable to remove them using jquery

I'm facing an issue with removing newly created li elements in an unordered list using jQuery. The delete button works perfectly fine for the existing li, but not for the ones added dynamically. <!DOCTYPE html> <html lang="en> <head> ...

jqueryhtml

Securing access with Passport and Facebook integration in an Express application, with the added feature of using create-react-app and React

Summary: What is the best way to start the Facebook Auth process from a page within my React application? In my quest to implement this feature, I've come across several sources that address some, but not all, of the aspects mentioned in the title. I ...

reactjsexpressreact-routerpassport.jscreate-react-app

How to hide or remove an element in jQuery depending on an attribute change

I am currently working on my website and exploring ways to utilize jQuery to display or add the element div#content1 when the #nav-home-tab has aria-selected=true, and to hide or remove the element if aria-selected=false. This is what I have tried so far: ...

jqueryhtmlbootstrap-4

What is the best way to set up ClerkJS with Vite on Vercel for deployment?

Currently experimenting with deploying ClerkJS Apps alongside Vite. For a sample project, feel free to check out the one I created here: https://github.com/shivpreet16/authentication-clerk-react I've been following the instructions provided in this d ...

reactjsvitevercelclerk

The marriage of a sticky and floating navigation bar using the power of Bootstrap 4

I am currently designing a navigation bar inspired by the layout on the EA GAMES website. While it functions perfectly in Chrome, I am encountering significant display issues in Internet Explorer. Any suggestions on how to troubleshoot and resolve this pro ...

htmlcssinternet-explorerbootstrap-4navbar

What are the appropriate Typescript typings for React Components that have the ability to return a string or their child components directly?

What are the suitable types for a React Component that can also output a string or directly its children, in addition to a JSX.Element? For example: type PropsStringExample = Readonly<{ returnString: boolean; }>; type PropsChildrenExample = Readon ...

reactjstypescript

simulate the act of clicking on a download link by utilizing a secondary click

adown is a link that allows users to download a file from my webpage. It functions properly on the page. However, btndown is a button designed to simulate clicking on the adown link, but unfortunately, it does not work as expected. When the btndown button ...

javascripthtmljquery

Differences between using propTypes with a functional react component and a React.Component

In the latest version of React (0.14), pure functions were introduced as components, like demonstrated here: export const Label = ({title} => ( <span>{label}</span> ) However, it is also important to clearly define to the component user ...

reactjs

Tips for extracting an XML value from an API

I'm attempting to showcase a value retrieved from an API (specifically used by PRTG software to extract information). Here is the link to the API: The API provides an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <ch ...

javascripthtmlajaxxml

The issue with using HTML code inside a variable that is passed into a partial view is that the code is not being

I have created a partial view to show the page header, which takes in two variables - an Icon and a title. The code for pageHeader.blade.php is as follows: <div class="page-header"> <div class="row"> <!-- Page header, center on small sc ...

htmllaravellaravel-5laravel-blade

Shopping cart feature in PHP - Ajax response only functioning once

I'm in the process of developing a shopping cart. I start by adding products to the cart, then use Ajax to dynamically update the quantity when it changes. Everything works smoothly after the first change, but subsequent quantity updates do not refres ...

javascriptphpjqueryhtmlajax

Tips on tallying the frequency of items in a state array

I'm currently working on an application in which clicking a button adds the item's value to the state. The button is clickable multiple times, allowing the same item to be added multiple times in the state array. My current code snippet: export ...

javascriptarraysreactjsstate

Tips for verifying if a user input aligns with a specific regular expression in a React application

updateModalField = event => { var inputValue = event.target.value; var isBtnDisabled = true; if ( inputValue && /^[A-Za-z]{5}$/i.test(inputValue) ) { isBtnDisabled = false; } this.setState({ ...

reactjsreact-redux

Create a custom loading spinner for a jQuery AJAX request

How can I add a loading indicator to my Bootstrap modal that is launched from a link? Currently, there is a 3-second delay while the AJAX query fetches data from the database. Does Twitter Bootstrap have built-in functionality for this? UPDATE: Modified J ...

javascriptjqueryhtmlajax