How do I apply border-radius to a grid table that overflows and is scrollable?

CodePen Link

I have designed a table using Grid CSS. However, I am facing an issue where I cannot apply border-radius to it due to the overflow: auto property that is necessary.

Current Table Design: https://i.sstatic.net/dNehv.png

Desired Table Design (with consistent rounded corners even when scrolling): https://i.sstatic.net/kGihC.png

thead, table, tbody, tr, th, td { 
  display: block 
}

.table__row {
  grid-template-columns: 74px 170px 170px 170px 170px 170px 170px 170px 170px 170px 170px;
  display: grid;
  grid-gap: 1px;
}


.table {
    display: grid;
    width: 1000px;
    margin: 0 auto;
    overflow: auto;
}

.table__head {
    background-color: #EDEFF4;
    padding: 20px 0;
    height: 64px;
}

.table__body {
    display: grid;
    border-radius: 16px;
}

.table__cell {
    padding: 12px 16px;
}

.table__body .table__cell {
    background-color: #747C8C;
    border-bottom: 1px solid #E2E4F6;
}
<table class="table">
      <thead class="table__head">
        <tr class="table__row">
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
         // additional header cells
        </tr>
      </thead>
      <tbody class="table__body">
       // body rows and cells
      </tbody>
    </table>

I have attempted setting overflow separately for the body and header sections, but this resulted in unsynchronized scrolling. Is there an alternative method to achieve rounded borders on an overflowing table?

htmlcss

Answer №1

To easily handle overflowing content in a table, just set the overflow property for the table body.

.table__body {
   display: grid;
   border-radius: 16px;
   overflow: auto;
}

If you're looking to synchronize scrolling between two elements, there's a helpful JavaScript plugin available. Check out https://github.com/asvd/intence for a solution and synchronized scrolling functionality!

Answer №2

Given that the solution provided by @patel-harsh does not meet the expected outcome, here is a more intricate CSS selector approach utilizing :first-child and :last-child selectors.

table tr:first-child td:first-child { border-radius: 7px 0 0 0; }
table tr:first-child td:last-child { border-radius: 0 7px 0 0; }
table tr:last-child td:first-child { border-radius: 0 0 0 7px; }
table tr:last-child td:last-child { border-radius: 0 0 7px 0; }

/* additional section for aesthetic purposes */
table {
  border-collapse: collapse;
}
table td {
    padding: 7px 12px;
    background: #e5e5e5;
}
<table>
  <tr>
    <td>First</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Second</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Third</td>
    <td>Value</td>
  </tr>
</table>

<br>

<table>
  <tr>
    <td>First</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Second</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Third</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Fourth</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Fifth</td>
    <td>Value</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

Error message: The import from './components/headerComponent/header' failed because it does not have a default export. Make sure to export it as default to be able to import it

I've been trying to bring a header from one file into another, but it's not cooperating. import React from 'react'; import { Typography, Card, CardContent } from '@material-ui/core'; import Header from './components/head ...

javascripthtmlcssnode.js

Tips on rearranging the location of a div element within a directive

I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-swi ...

javascripthtmlcssangularjsangularjs-directive

Save PHP webpage that displays CSS styles

After finding a solution here on SO, I am attempting to create a dynamic stylesheet using PHP. The Issue... I want the stylesheet (named css.php) to be cached in the user's browser to avoid loading it with each page visit. I've set the necessar ...

phphtmlcssapachehttp

Setting push and pull columns in Bootstrap for smaller screen sizes can help to rearrange the layout and improve the

On my page layout with Bootstrap 3.2.0, I have set up the following structure: <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div> <div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div> <div class="col-lg ...

csstwitter-bootstraptwitter-bootstrap-3

I am looking to apply the Normal texture to the Fbx model, but I am encountering issues with the normal not functioning

This is an example. I am in need of a model with both a color map and a normal map. Just like the one seen in Microsoft 3D Viewer. https://i.sstatic.net/DU2vo.png Furthermore, I already have a model with a normal map. My approach involves using the re ...

htmlthree.jstexturesnormalsfbx

The responsive grid in bootstrap-vue can sometimes cause content to be concealed

I am in the process of creating a vue application using bootstrap-vue. Here is a snippet of my template and styles: <template> <div> <b-container class="p-0 mt-3" fluid> <b-row style="height:110px"> ...

htmlcssvue.jsbootstrap-vue

Looking to modify the height and width of an image when it is hovered over using inline CSS

My current project involves working with a dynamic template where the HTML code is generated from the back-end using TypeScript. I am trying to implement inline CSS on hover, but despite having written the necessary code, it does not seem to work as intend ...

htmlcssangulartypescript

What is the best way to ensure that all Grid thumbnails have the same height?

I have a collection of image thumbnails organized in a grid format. The HTML structure uses <ul> as a wrapper and <li> elements to display each thumbnail. I have applied the following CSS properties to the <li> tag: float: none; display: ...

javascripthtmlcsstwitter-bootstrap

Is it possible to resize the output image in Three.js post-processing?

My game tends to lose performance when I switch to fullscreen mode, but it runs smoothly when the screen is small. I'm wondering if there's a way to render the game in small screen mode first and then scale up the processed render. I'm goin ...

javascripthtmlthree.js

What is the best way to ensure that two checkboxes are mandatory out of a total of three in

<input type="checkbox" name="Package1" value="packagename"> <input type="checkbox" name="Package2" value="packagename"> <input type="checkbox" name="Package3" value="packagename"> Is there a way to require the user to select at least t ...

htmlforms

Modify the button's text with jQuery after it has been clicked

I've been struggling to update the text of a button after it's clicked, and I'm encountering an issue where it works in one part of my code but not in another. Could someone please guide me on what might be missing in my code? The first bl ...

javascriptjqueryhtmlcss

Can you provide instructions on how to reposition a button following the upload of

Here is an example of my HTML code: <input type='file' multiple style="display: none;" id="upload-file" /> <div class="img-container"> <button type="submit" class="btn btn-primary" id="upload-add-product"> <i cla ...

javascriptphpjqueryhtmlcss

How to disable event.preventDefault on a hyperlink with a delay using jQuery or JavaScript

I need to disable event.preventDefault after a certain period of time on a hyperlink using jQuery or JavaScript. When I click on the link, it should redirect me to the specified href link after a delay because I need to send an AJAX request during that tim ...

javascriptjqueryhtmlsettimeout

Steps to avoid HTML encoding the ' character in Next.js _document.js file

Currently, I am working on integrating VWO into my website by following the steps mentioned here. I have included the VWO script tag within a NextJs Head tag as shown below: <Head> <script type='text/javascript' id='vwoC ...

htmlnext.jsvwo

Converting HTML String to PDF in ASP.NET

Storing HTML content in a String variable In this particular variable, I am creating an HTML code which will be later displayed within a label in asp.net. HTMLstr = "<table width=""auto;""> " HTMLstr &= "<tr style=""color:white ; ba ...

htmlasp.netvb.netpdf

Conceal the menu by pressing the button

I'm having trouble with a bootstrap drop-down feature. When the button is clicked, the menu appears, but clicking the button again doesn't hide the menu as intended. I've attempted a method that didn't work and I believe there must be a ...

htmljquerycssbootstrap-4

How to Style Your ASP.NET Website: Utilizing a Stylesheet with Visual Studio 2010

I am having trouble adding a stylesheet to the master page of my asp.net web form. I want to create an inline navigation menu at the top of the page, but I can't seem to get it working. I have created the stylesheet in the same way I would for an HTML ...

asp.netcssinlinenavigationbar

HTML code to set the background color of a selection box

Here is an image that relates to my query. I have created a select box in HTML that contains colors, as shown in the image above and the code below. By using CSS, I have applied classes to color various option elements, but how do I ensure that the select ...

javascriptjqueryhtmlcss

An issue has occurred: The column name 'B' is not valid. This error originated from the System.Data.SqlClient.SqlConnection

I'm currently working on developing a straightforward registration page using ASP.NET C# in Visual Studio 2013. After attempting to submit the registration details for database insertion purposes, an error occurred. The error message indicated an iss ...

c#htmlcssasp.netsql-server

Learn the steps to animate a div by clicking on another div, and explore how to make the animated div interact with and move other elements

I am trying to figure out how to animate a div when I click on another div. I want the animated div to not only move, but also push other elements around it instead of just covering them up. Currently, my div animates on top of images below it, but I want ...

htmlcssimageanimation