table with rounded edges

Asked

Viewed 585 times

1

Good morning.
I made a table with the rounded edges however, apparently the tds stay on the table and not inside it, as if a background image follows the code CSS HTML:

<style>
     .tabela {
       border-radius: 15px;
       background: #C0C0C0;
       padding: 20px; 
       width: 600px;
       height: 70px; 
    }
    #tr1{
        background: #FFD700;
        padding: 20px; 
        width: 600px;
        height: 70x; 
        }
        #tr2{
        background: #006400;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
        #tr3{
        background: #008000;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
        #tr4{
        background: #228B22;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
        #tr5{
        background: #32CD32;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
        #tr6{
        background: #00FF00;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
        #tr7{
        background: #7CFC00;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
        #tr8{
        background: #7FFF00;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
    
        #tr9{
        background: #ADFF2F;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
        #tr10{
        background: #FFFF00;
        padding: 20px; 
        width: 400px;
        height: 70x; 
        }
    </style>

    <table class="tabela">
        <tr id="tr1">
         <td><strong>Informacao Nutricional<small><br>Porcao ___g ou ml (medida caseira)<small></strong></td>
        </tr>
          
          <tr id="tr2">
            <td>Quantidade  por porcao</td>
            <td>&#37  VD (*)</td>
          </tr>

          <tr id="tr3">
            <td>Valor energetico</td>
            <td>...kcal=...Kj</td>
            <td>&nbsp;2&nbsp;</td>
          </tr>
          <tr id="tr4">
            <td> Carboidratos</td>
            <td>g</td>
            <td>&nbsp;1&nbsp;</td>

          </tr>

          <tr id="tr5">
            <td>Proteina</td>
            <td>g</td>
            <td>&nbsp;3&nbsp;</td>
          </tr>

          <tr id="tr6">
            <td>Gorduras Totais</td>
            <td>g</td>
            <td>&nbsp;0&nbsp;</td>
          </tr>

          <tr id="tr7">
            <td>Gorduras Trans</td>
            <td>g</td>
            <td>&nbsp;-&nbsp;</td>
          </tr>

          <tr id="tr8">
            <td>Fibra Alimentar</td>
            <td>g</td>
            <td>&nbsp;1&nbsp;</td>
          </tr>

          <tr id="tr9">
            <td>Sodio</td>
            <td>mg</td>
            <td>&nbsp;15&nbsp;</td>
          </tr>

          <tr id="tr10">
            <td>(*)<small> %  Valores diarios com base em uma dieta de 2.000 Kcal ou 8400KJ. Seus valores diarios podem ser maiores ou menores dependendo das suas necessidades energeticas.</small></td>
          </tr>

    </table>

  • What you’re trying to do is leave rounded edges for all rows of the table? or just for lines that are in yellow?

  • Thanks, I already got that was a while ago and only now I saw your reply but, thanks anyway !

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.