Having difficulty modifying the border radius for <thead> and <tr> elements

I'm trying to customize the appearance of my table by changing the radius of the thead and tr elements. Although I am able to apply border-radius to the table itself, it doesn't seem to work for the thead and tr elements. Here is the CSS code snippet:

table{
    width:100%;
    border-radius:5px;
    background:gray;
}
thead {
    border-radius:5px;
    text-align:left;
    background:blue;
}
tr{
    border-radius:5px;
}
th,td{
    padding:5px;
}

Below is the corresponding HTML markup:

<table>
    <thead>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Country</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Andy</td>
            <td>UK</td>
            <td>40</td>
        </tr>
    </tbody>
</table>
htmlcss

Answer №1

It's a simple task to accomplish. You just have to apply the border radius to the appropriate corners of the first and last th in the row, not the entire thead. Here is how you can achieve this:

th:nth-child(1) {
    border-radius: 5px 0px 0px 0px;
}

th:nth-last-child(1) {
    border-radius: 0px 5px 0px 0px;
}

Below is a complete code snippet for reference:

table{
    width:100%;
    border-radius:5px;
    background:gray;
}
tr{
    border-radius:5px;
}
th,td{
    padding:5px;
}
th{
text-align:left;
    background:blue;
    color: #fff;
}
th:nth-child(1) {
    border-radius: 5px 0px 0px 0px;
}

th:nth-last-child(1) {
    border-radius: 0px 5px 0px 0px;
}
<table>
     <thead>
        <tr>
        <th>No</th>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
        </tr>
     </thead>
     <tbody>
        <tr>
        <td>1</td>
        <td>Andy</td>
        <td>UK</td>
        <td>40</td>
        </tr>
      </tbody>
      <tbody> 
    </table>

Answer №2

To ensure the radius is properly displayed, it should be placed within a th or td tag like the following example:

table{
    width:100%;
    border-radius:5px;
    background:gray;
    border-collapse: separate;
}

table th {

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align:left;
    background:blue;
}

table td{
    border-radius:5px;
}
th,td{
    padding:5px;   
}

td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}
<table>
     <thead>
        <tr>
        <th>No</th>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
        </tr>
     </thead>
     <tbody>
        <tr>
        <td>1</td>
        <td>Andy</td>
        <td>UK</td>
        <td>40</td>
        </tr>
      </tbody>
      <tbody> 
    </table>

Answer №3

Remember to include the "th" element in your CSS for rounded corners and use the property "border-radius".

thead th {
    border-radius: 10px;
    text-align: left;
    background: blue;
}

Don't forget to add the "border-radius" style to the td as well.

td {
    border-radius: 10px;
    background-color: red;
}

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

What is the simplest method to transfer a variable from an HTML file to a Python script?

Can someone show me the simplest method to pass a variable from HTML to Python? I'm using the "input" tag to get the variable, and I only need to send it to my Python script without any response back to the HTML. Appreciate your help! ...

pythonhtmlvariables

I found myself pondering over possible solutions to rectify this parse error

I need help resolving an issue with parsing. Here is the link to the error image: https://i.stack.imgur.com/jKQat.jpg. Additionally, my HTML code connecting to the CSS site can be found here: https://i.stack.imgur.com/ST31r.jpg. The website I linked in t ...

htmlcss

Adjusting unseen (white text) results within the RStudio layout called `Cobalt``

I am currently using R Studio's Cobalt theme and have encountered an issue where the in-line output in Rmd files is not visible (white font on a white background). I need to change the font color to something that is visible. Below is a reproducible ...

cssrrstudio

Loading dynamic images in HTML using Javascript and Django templates

Attempting to load a specific image using javascript within a django template has presented challenges due to the formatting of django tags. The standard django static asset source in an img tag looks like this: {% load static %} <img src="{% static & ...

javascriptpythonhtmldjango

Apply an active navigation class depending on the current URL in the session

Is there a way to dynamically add an .active class (font-weight:700;) to the active pages navigation menu based on the category in the URL? The system url is constructed using session and category parameters. For example, the homepage for logged-in users ...

javascriptcss

JavaScript and the importance of using commas in arrays

I am developing a system that displays text in a textarea when a checkbox is checked and removes the text when the checkbox is unchecked. The functionality is mostly working as intended, but I am facing an issue where commas remain in the textarea after un ...

javascripthtml

Adding a stylish background image to a header

Recently, I tried to add a background image as a backdrop for my Header but ran into some issues. I was successful using a background color, but not with the background image itself. h2 { background-color: red; font-family: "Comic Sans MS", cursiv ...

htmlcssheaderbackground-image

Issues with JQuery script causing inconsistency in checking checkboxes

My code includes two functions designed to check and uncheck all checkboxes with a specific class. Initially, the functions work as expected but upon subsequent attempts to run them, the checkboxes do not function properly. Instead, the HTML code seems to ...

javascriptjqueryhtml

css setting the dimensions of list items in HTML

Welcome to my page at . Notice how the "Storia del Bernese" menu voice is positioned above the other list items. I would like all list items to have the same height but different widths based on text length. What adjustments should I make in my CSS to ach ...

htmlcsslistheightwidth

Fetching data from MySQL using Ajax technology

I need assistance with my form that is supposed to input a name and phone number, fetch data from a MySQL database based on the input values, and display the results. However, when I execute the query using an onclick function, instead of retrieving data f ...

htmlmysqlajax

What are the reasons for my HTML page not appearing on the local host within Google App Engine?

Below is the main.py file along with the html file intended to be rendered by the Jinja2 template being utilized: main.py import os import webapp2 import jinja2 from google.appengine.ext import db template_dir = os.path.join(os.path.dirname(__file__), & ...

pythonhtmldjangogoogle-app-engine

Why is it that when I refresh the page in Angular, my logged-in user is not being recognized? What could be causing this

I am developing a Single Page Application using the combination of Angular JS and Node JS. In my HTML file, I have defined two divs and based on certain conditions, I want to display one of them using ng-if. However, I noticed that the model value used in ...

javascripthtmlangularjsnode.jssingle-page-application

how can I apply a class name to an SVG element within styled components

I've been attempting to style an SVG icon component using styled-components, but I'm encountering some issues as the styles I apply to the close icon are not taking effect. import styled from 'styled-components' import Close from ' ...

cssreactjssvgstyled-components

Position an image in the center of a column using the Ionic grid

I'm currently working on using the Ionic grid to create a menu layout for my app, but I'm facing an issue with the image sizes not adjusting and their alignment inside the columns not being centered. https://i.sstatic.net/yWjCV.png Below is the ...

htmlcssangularjsionic-framework

Arrange a table by simply clicking the header of each column using jQuery, all without having to replicate the full table

Looking to implement a table sorting function that only duplicates rows, not the entire table. When the user clicks on a column header, the data in that column should be compared and the rows rearranged accordingly. However, I'm facing some issues wit ...

javascriptjqueryhtml

Error message: Laravel 8 and Ajax - 405 Error - Method Not Allowed

Whenever I try to input something into the form, it keeps showing an error message saying "405 Method not allowed". How can I resolve this issue? This is my route: Route::get('/search' , [HomeController::class, 'searchPost']) ...

phphtmlajaxlaravel

Sending Profile Picture and Description to PHP using AJAX and jQuery

I have been struggling to upload user images via AJAX to a PHP database. Despite trying various tutorials and examples, nothing seems to work with my code. The codes function properly without AJAX, but I need the upload process to be seamless for users by ...

phphtmljqueryajax

The CSS method to conceal the initial list item is proving ineffective

I'm having an issue with my WordPress theme where I want to hide only the first li element but it's hiding all of them. Here is the HTML code I'm using: <div class="nav"> <ul class="nav-tabs nav-justified"> <li class="activ ...

csswordpresscss-selectors

Looking to crop a canvas without changing its dimensions using jQuery

I'm currently working on a project that involves overlaying two images; one uploaded by the user and the other a default image. However, I am facing an issue when the uploaded image is a rectangle instead of a square, causing the canvas to resize it. ...

javascripthtmljquerycanvasoverlay

Discover the benefits of utilizing router.back() cascade in Next/React and how to effectively bypass anchor links

Currently, I am working on developing my own blog website using Next.js and MD transcriptions. The issue I am facing involves anchor links. All the titles <h1> are being converted into anchor links through the use of the next Link component: <Link ...

javascripthtmlreactjsnext.js