Html Question posted in
Some basic documentation can be found here.

While applying border radius to HTML table row, additional background can be seen

I am using an HTML table where I am applying color to the table cells. The table cells have border-radius properties.

But, an additional background can be seen after the border-radius is applied. Here is the image

enter image description here

How to remove this

My code is following

        .attendance-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px;

            thead tr {
                height: 25px;
            }

            thead tr th {
                padding: 0 5px;
                white-space: nowrap;
            }

            tbody tr {
                box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.10);
                overflow: hidden;
                font-size: 12px;
                font-weight: bold;
            }

            tbody tr td {
                height: 30px;
                padding: 6px 15px;
                border: none;
            }

            tbody tr:nth-child(odd) td {
                background-color: rgba(34,158,219,0.1);
            }

            tbody tr:nth-child(even) td {
                background-color: rgba(255, 255, 255, 1);
            }

            tbody tr td:first-child {
                border-radius: 5px 0 0 5px;
            }

            tbody tr td:last-child {
                border-radius: 0 5px 5px 0;
            }
        }
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Solved it! I had to add border-radius to this part tbody tr {box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.10);overflow: hidden;font-size: 12px;font-weight: bold;border-radius: 5px;}


  2. 0

    Without an example (HTML-code) I could only guess.

    You could try to pase "background-color: #0000;" at the ".attendance-table", for example:

     .attendance-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px;
            background-color: #0000;

    If this does not work please paste us an HTML-example of how you use your stylesheet.

    Login or Signup to reply.
  3. 0

    From the initial questions it does not get clear what is the final goal but I can see the main mistake.

    You are trying to apply border radius to a different element to what gets the shadow. (td has border radius and tr has the shadow) This means that you are trying to apply background and a shadow to elements with different shape.

    The easiest solution to the given css code is to add border radius to the table row as well:

    sth like:

    tbody tr {
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.10);
    border-radius: 5px
    overflow: hidden;
    font-size: 12px;
    font-weight: bold;
}

    there might be more sophisticated solutions but we need more details on what is expected and what the html looks like.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search