What is the best way to get a table header with collapsed borders and tbody cells with spacing between them?

Example

I am currently in the process of creating a table design for a web project, inspired by the example above.

Here is my attempt:

.table_RMA table{
width: 100%;
border-collapse: separate;
border-spacing: .5rem;
}
.table_RMA table thead{
color:white;
background: #1d5ba6;
border-radius: 9px;
box-shadow: -1px 1px 8px rgba(126, 114, 242, 0.58);
}
.table_RMA table tbody{
margin-top: 1rem;
}
.table_RMA table tbody tr td{
padding: 1rem;
text-align: center;
color:#1d5ba6;  
background: white;
border-radius: 9px;
box-shadow: -1px 1px 8px rgba(126, 114, 242, 0.58);
}

However, I am facing an issue with getting the spacing of <td> cells within the <tbody> to match that of the <th> cells in the <thead>.

csshtml-table

Answer №1

Do you anticipate something like this:

#table-design {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
text-align:center;
}
#table-design td{
border:4px solid #d8d8ff;
padding: 6px;
-webkit-box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
-moz-box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
}
#table-design tr{
background-color: #fff;
color:blue;
-webkit-box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
-moz-box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
box-shadow: 1px 1px 15px rgba(0, 31, 255, 0.13);
}
#table-design tr td{
border-radius:10px;
}
#table-design th {
padding-top: 12px;
padding-bottom: 12px;
background-color: #0065c6f7;
color: white;
  
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table id="table-design">
  <tr>
    <th>Days</th>
    <th>Date</th>
    <th>Presence</th>
     <th>Absence</th>
      <th>Hours Count</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>01/08/2019</td>
    <td><i class="fa fa-check-circle" style="font-size:36px;color:#3a9ffff7"></i></td>
        <td><i class="fa fa-check-circle" style="font-size:36px;color:lightgrey"></i></td>
    <td>7</td>

  </tr>
  <tr>
    <td>Tuesday</td>
    <td>01/08/2019</td>
    <td><i class="fa fa-check-circle" style="font-size:36px;color:#3a9ffff7"></i></td>
        <td><i class="fa fa-check-circle" style="font-size:36px;color:lightgrey"></i></td>
    <td>7</td>
  </tr>
  
  
    <tr>
    <td>Wednesday</td>
    <td>01/08/2019</td>
    <td><i class="fa fa-check-circle" style="font-size:36px;color:#3a9ffff7"></i></td>
        <td><i class="fa fa-check-circle" style="font-size:36px;color:lightgrey"></i></td>
    <td>7</td>
  </tr>
  
      <tr>
    <td>Thursday</td>
    <td>01/08/2019</td>
    <td><i class="fa fa-check-circle" style="font-size:36px;color:#3a9ffff7"></i></td>
        <td><i class="fa fa-check-circle" style="font-size:36px;color:lightgrey"></i></td>
    <td>7</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

The initial-scale setting for the iOS viewport is not respected when the on-screen keyboard is

I have encountered a situation where I need to embed a non-responsive page using an iframe. To display the entire iframe, I adjust the viewport width and scale dynamically through JavaScript. When it is time to close the iframe, I revert the viewport width ...

javascripthtmlioscss

Show all menu items in a single row, allowing for customization of the line height

My goal is to showcase all of my menu items in a line while keeping the sub-menus hidden until their parent is hovered over. I achieved the inline display using 'display: inline', but encountered an issue where the sub-menu disappears when the cu ...

htmlcssflexboxinline-styles

Is it just me or does this radio button in IE11 look like a pair of googly eyes?

Recently, I noticed a strange issue on a website I'm working on with radio buttons. While everything looks fine in most browsers, in IE11 some of the radio buttons appear like googly eyes. Could this be a bug specific to IE11 or am I missing something ...

htmlcssradio-buttoninternet-explorer-11microsoft-edge

Modal box fails to refresh content

Currently, I am in the process of learning how to modify my blog using a modal window. However, when I click on the edit button within the modal, an error message 'Failed to execute 'fetch' on 'Window': Invalid name' appears i ...

javascripthtmlcssreactjsbootstrap-modal

Basic Jquery CSS style requests

Can you help me troubleshoot this issue? var hover = $('<img />').attr('src', hovers[i]).css('position', 'absolute') I'm having trouble getting th ...

jquerycss

Calculating the Distance Between Elements within a Flex Container Using JavaScript

I am looking to calculate the margin left and right for children of a flex item <div class="sec images" style="display:flex;justify-content:space-between"> <img src="images/en_mb-mega-01.png" alt=""> ...

javascripthtmljquerycssflexbox

Adaptable background visuals

Struggling to find a solution for a seemingly simple problem. I am looking to create responsive/fluid images that scale relative to the viewport size. I also need to load them using CSS with the background property for selective loading of different versio ...

htmlcssresponsive-design

Thumbnails gracefully hovering alongside titles

I am puzzled by the fact that some of the thumbnails are displaying differently even though they have the same CSS... h4 { line-height:100%; color: #be2d30; letter-spacing: 1px; text-transform: uppercase; font-family: 'Gnuolane'; font-size:26px ...

csshtmlimageviewtitle

Creating various styles for cards using ngFor within Angular

I have been working on applying different styles to cards created using ngFor in Angular. Here's how it currently looks: https://i.sstatic.net/UhbSp.png My aim is to set unique styles for each card. Due to the ngFor loop used in creating them, I ini ...

htmlcssangular

Preventing the page from scrolling to the top while utilizing an Angular-bootstrap modal and a window position:fixed workaround on an iPad

It's common knowledge that there is a bug in bootstrap modals on certain devices, causing the page behind the modal to scroll instead of the modal itself (http://getbootstrap.com/getting-started/#support-fixed-position-keyboards) An easy fix for this ...

javascriptcssangularjstwitter-bootstrapangular-bootstrap

Exploring a List of Divisions Based on User Input

My input field has a special functionality - Pressing the down arrow key will shift focus from the input to the first element in the list of divs below it, moving downwards as you continue pressing the down key. Pressing enter will set the text in that div ...

javascriptjqueryhtmlcss

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

javascriptcssreactjsnext.jscss-transitions

Scaling the ion-spinner to fit your specific needs

In my Ionic application, I am utilizing the ion-spinner. However, I have encountered an issue with resizing the spinner. While custom CSS works well with default spinners, it does not function properly with Bubbles, Circles, and Dots spinners. CSS .spin ...

cssangularionic-framework

Exploring the power of colors in Tailwind CSS and Material UI for your CSS/SCSS styling

Discovering unique color palettes like the Tailwind Color for Tailwind CSS and theMaterial UI colors has been inspiring. These collections offer a range of beautifully named colors from 100 to 900 and A100 to A400, reminiscent of font styles. I am intrig ...

csssassmaterial-uimaterializetailwind-css

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

javascriptjquerycsscss-selectors

Deciphering the principles of Bootstrap

I'm looking to understand more about what Bootstrap is. I know it's commonly used for styling web pages, but could you provide me with a clear explanation? Can big companies like Twitter, Facebook, or YouTube utilize Bootstrap for their platforms ...

htmlcsstwitter-bootstrap

Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to. I initially thought of implementing a background color change timeout, but I'm facing some issues with it... Check out this example: I hav ...

javascriptjquerycss

Reset all modifications made by jQuery animations before initializing a fresh animation

Is there a way to reset the changes made to the first div before animating the second div using jQuery animation? $(".order-b").click(function(event){ $(".order-t").animate({top:'30%'}, "slow" ); }); $(".counsel-b").cl ...

javascriptjqueryhtmlcssanimation

What is the reason for CSS being implemented exclusively on my master page?

I have a link to an external CSS file in the head section of my Master page. <link href="style.css" rel="stylesheet" type="text/css" /> Although I can apply the style in child pages during design time... <asp:Label ID="Label" runat="server" Css ...

asp.netcssmaster-pages

Tips for adjusting the maximum width and content-based width for columns within an HTML/CSS table

I'm working on a simple HTML/CSS code featuring a container with two adjustable slots, controlled by a handler in the middle to modify the space each slot occupies. The first slot contains a table with fixed columns, automatic columns, and limited col ...

htmlcss