Is there a way to make the edges of this table more curved?

I utilized an HTML code generator to easily create this table, but I am struggling to give it rounded borders.

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}
<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>Price per unit</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>Delivery Fee</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>Delivery Time</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>

Seeking assistance as a complete beginner here. Any help would be greatly appreciated.

I've attempted different CSS solutions found online, but due to the way the table is generated, none of them seem to work. Building the table from scratch seems daunting at the moment, especially since it is used multiple times on the site. However, adding the borders where needed now seems like the best option instead of completely rebuilding the tables.

htmlcss

Answer №1

Displayed on the table:

border-radius: 1em;
overflow: hidden;
outline: 3px solid #93d22c;
outline-offset: -3px;

Complete code (with only .tg changed):

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 1em;
  overflow: hidden;
  outline: 3px solid #93d22c;
  outline-offset: -3px;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}
<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>Price per unit</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>Delivery Fee</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>Delivery Time</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>

Answer №2

To achieve a rounded border for a table using border-radius, it is necessary to remove the border-collapse: collapse; property and instead use border-spacing: 0;. This will allow you to apply the desired border-radius.

.tg {
  /* border-collapse: collapse; */
  border-spacing: 0;
}

tr:first-child th:first-child {
  border-top-left-radius: 20px;
}
tr:first-child th:last-child {
  border-top-right-radius: 20px;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 20px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 20px;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}
<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>Price per unit</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>Delivery Fee</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>Delivery Time</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</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

Enhancing the appearance of individual cells in jQuery DataTables

While working with jQuery DataTables, I have successfully managed to access row data and apply styling to the entire row. Below is the code snippet used to initialize the datatable: var $dataTable = $('#example1').DataTable({ "data": data, ...

javascriptjquerycssajaxdatatables

Verifying the timestamp of file submission in a form

My goal is to create an HTML form that allows users to send a file to my server, while also recording the exact time they initiated the file transfer. However, I'm facing an issue where only the time the file is received is being logged, rather than w ...

javascriptphpjqueryhtmlajax

Altering the dimensions of a <div> based on the retrieved data

I am currently retrieving data from an API and displaying certain properties using mapping. I would like to adjust the width of the component based on the value of these properties. <h5> <span className="viewcount" ref={boxSize}> ...

javascriptcssreactjs

Unable to make changes to inherited Jinja template in other files

This is the code from my base.html file: {%load static%} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...

htmldjangojinja2

Tips for evaluating style modifications on mouseover using cypress

Trying to test hover styles on table rows but encountering issues: Here is the code snippet I am testing: it("Table rows should display correct hover styles", () => { cy.get("table>tbody>tr").each(($el, index, $list) =&g ...

htmlcsscypresse2e-testing

Utilizing PHP and HTML div tags to connect and manipulate a MySQL database

Struggling with incorporating HTML div tags into a booking system. I have the user input fields for city, date, and pet type set up, but getting lost when it comes to passing this information to a SQL database using PHP. Can someone provide guidance on how ...

phphtmlcsssql

Enhance your PrimeNG p-calendar by customizing the background-color of the dates

Hello, I am currently attempting to customize the appearance of the p-calendar, but I am struggling with changing the color of the displayed dates. Can anyone provide assistance? Thank you in advance. Below is my template: <div class="p-field p-co ...

htmlcssangularprimengprimeng-calendar

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

javascriptjquerycss

Title of Flickr API

Hey everyone, I'm working on setting up a gallery on my website using images and sets from Flickr. I've successfully loaded all the sets with the following code: $flickr = simplexml_load_file('http://api.flickr.com/services/rest/?method=fli ...

phphtmlxmlapiflickr

Exploring ways to customize the styles of MUI Accordion components in a Next.js project using CSS modules

I'm trying to customize the default MUI CSS for the accordion component using a CSS module. The issue I'm facing is that the class is dynamically added by MUI, making it impossible to target directly. Here's the solution I attempted, but it ...

csssassnext.jsmaterial-uicss-selectors

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss

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

Form for contacting with file attachment option

I'm having trouble integrating file upload functionality into my existing code. I've been scouring the internet for solutions but haven't found anything that fits seamlessly with my current setup. It's frustrating to encounter error aft ...

phphtmltwitter-bootstrap-3

Lines that are next to each other within an svg path and have a stroke

I'm working with an SVG that contains multiple lines within a path element. <path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/> Due to the stroke-width, the lines a ...

htmlcsssvg

using CSS to position elements that are generated dynamically

Hey there, I'm facing a little issue with my elements. These elements are being generated dynamically and I'd like to display them in a 4 column layout. The challenge is that they arrive separately and I can't simply wrap them in a div and u ...

css

Highcharts - Troubleshooting the chart reflow feature

Take a look at the fiddle I created. I encountered an issue with the chart width when toggling the sidebar. After seeking help on Stack Overflow from this post, I was able to solve it. Now, I'm facing another bug where adding transitions while togg ...

javascriptjqueryhtmlcsshighcharts

Unable to append HTML table row to designated table

I am trying to populate an HTML table with the JSON string data I receive. The object data seems correct, but for some reason, it is not getting appended to the table. Can you help me identify what's wrong with my jQuery append statement? functio ...

javascriptjqueryhtmlajax

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

Is the div height set to 100% until the content surpasses the height of the browser window

Is there a method to make a div fill 100% of the available page height, until it contains enough content to require a scrollbar? // For example, if the browser height is 600px: <div> // Initially empty, so it will be 600px tall. </div> . ...

htmlcss

To prevent the animation from overflowing, set the parent element to have hidden overflow while still displaying the child element

I am facing an issue with two menus that can be toggled using a switch. Each menu item has a dropdown that appears when clicked. The problem arises when switching between the menus, as there is an animation for the transition (slide in and slide out). I wa ...

javascripthtmljquerycss