border-radius in table does not work CSS

Navigation
3

I'm trying to put a border-radius on my table so that the 4 edges of it are rounded. If I move the tr / th / td border-radius will change the radius of the ballots and not just those of the table, which is my goal and if I change the radius of the table and this appears correctly. With the table mark that the radius has decreased but the table does not follow this, it follows an image to illustrate what I said:

CSS:

.table-round-corner{margin-top:15px;width:100%;text-align:center;berder-radius:25px;border:solid#ddd1px;overflow:hidden;}tabletd{color:#aaa;background-color:white;padding:5px;border:1pxsolid#ddd;}tableth{color:white;background-color:red;font-weight:normal;text-align:center;padding:5px;font-size:12px;}

HTML:

<tableclass"table-round-corner">
                        <tr>
                            <th>ASDASD</th>
                            <th>ASDASDAS</th>
                            <th>ASDASD</th>
                        </tr>
                        <tr>
                            <td>ASDASD</td>
                            <td>34</td>
                            <td>R$ 00,00</td>
                        </tr>
                        <tr>
                            <td>ASDASDASD</td>
                            <td>00</td>
                            <td>R$ 00,00</td>
                        </tr>
                    </table>

Summary:

I need my table to have rounded tips.

    
asked by anonymous 22.04.2015 / 18:57

3 answers

6

Live!

I think this is what you want: 

.table-round-corner {
    margin-top: 15px;
    width: 100%;
    text-align: center;
    overflow:hidden;
    border-collapse:separate;
    border: solid #ccc 1px;
    -webkit-border-radius: 25px;
       -moz-border-radius: 25px;
            border-radius: 25px;
}


table td {
    color: #aaa;
    background-color: white;
    padding: 5px;
    border: 1px solid #ddd;
}

table th{
    color: white;
    background-color: red;
    font-weight: normal;
    text-align: center;
    padding: 5px;
    font-size: 12px;
}
<table class="table-round-corner" cellspacing="0">
  <tr>
    <th>ASDFASDF</th>
    <th>ASDFASDFASDFA</th>
    <th>ASDFASDF</th>
  </tr>
  <tr>
    <td>ASDFASDF</td>
    <td>654</td>
    <td>R$ 00,00</td>
  </tr>
  <tr>
    <td>SDFASDF</td>
    <td>45</td>
    <td>R$ 00,00</td>
  </tr>
</table>
    
22.04.2015 / 19:09
5

Just apply to the table. 

table {
  border: 2px solid #ccc;
  border-radius: 5px;
}
<table>
  <tr>
    <td>foo</td>
    <td>foo</td>
    <td>foo</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>foo</td>
    <td>foo</td>
  </tr>
</table>

As you are (apparently) using Bootstrap, you can try this: 

/* só para manter a tabela centralizada */
.panel {
  margin: 10px auto;
  max-width: 70% !important
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<div class="panel panel-default">
  <table class="table table-bordered">
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
    </tr>
  </table>
</div>

If it still does not work, it may be that some other rule is overriding border-radius . In this case, you can try this: 

.table {
   border-radius: 5px !important
}

! important - Maujor

    
22.04.2015 / 19:06
3

I do not understand exactly what you want. Is that it?

HTML 

<table class="borda-na-tabela">
<tr>
<th>ASDFASDF</th>
<th>ASDFASDFASDFA</th>
<th>ASDFASDF</th>
</tr>
<tr>
<td>ASDFASDF</td>
<td>654</td>
<td>R$ 00,00</td>
</tr>
<tr>
<td>SDFASDF</td>
<td>45</td>
<td>R$ 00,00</td>
</tr>
</table>

CSS 

.borda-na-tabela {
    margin-top: 15px;
    width: 100%;
    text-align: center;
    overflow:hidden;
    border-collapse:separate;
    border: 3px solid red;
    border-radius: 50%;
}

table td {
    color: #aaa;
    background-color: white;
    padding: 5px;
    border: 1px solid #ddd;
}

table th{
    color: white;
    background-color: red;
    font-weight: normal;
    text-align: center;
    padding: 5px;
    font-size: 12px;
}

JSFiddle

    
22.04.2015 / 19:26
I can not concatenate a variable in a query What code and language make the input tag do what it does?