Problems with border-radius property in table

Question

Problems with border-radius property in table

Navigation

#1 by (1 votes)
#2 by (0 votes)

-1

Hello, I have a table and there is no way to show the border radius property in browsers (chrome and firefox). Only in the internet explorer can I see the effect. Anyone who can help me with this?

Thanks

.tabla_recibido td:first-child {
  width: 150px;
  padding-right: 30px;
  border-radius: 10px;
}

.tabla_recibido td:nth-child(2) {
  width: 130px;
  padding-right: 30px
}

.tabla_recibido tr:nth-child(2) {
  border-bottom: 0.5px solid
}

.tabla_recibido tr:nth-child(3) {
  border-bottom: 0.5px solid
}

.tabla_recibido tr:nth-child(4) {
  border-bottom: 0.5px solid
}

.tabla_recibido td:last-child {
  width: 250px;
  /*border-bottom-right-radius: 6px;
        border-left: 0.5px solid*/
}


/*.tabla_recibido tr:first-child td:first-child{border-top-left-radius: 20px}
    .tabla_recibido tr:first-child td:last-child{border-top-right-radius: 20px}
    .tabla_recibido tr:first-child td:only-child{border-top-right-radius: 20px; 
    border-top-left-radius: 20px}*/

.tabla_recibido h6 {
  font-size: 0.8em
}

.tabla_recibido td {
  padding: 2px;
  text-align: justify;
  /*border: 0.5px solid;*/
}

.tabla_recibido li {
  list-style: none;
}

.tabla_recibido {
  border: 1px solid;
  margin-bottom: 20px;
}

<table class="tabla_recibido">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr id="fila1">
    <td id="logo_recibido">
      <img src="../../../img/logo.png">
    </td>
    <td colspan="2">
      <h5><b>XXXXXXXX</b></h5>
      <h5>Nombre del trabajador</h5>
      <h5>Ruc: 17xxxxx</h5>
      <h5>Direccion: Avexxxxxxxxx</h5>
      <h5>Telefono: 097xxxxxxx</h5>
    </td>
    <td>
      <h3><b>Orden:</b></h3>
      <h1 id="orden"># 0000{!! $equipo->id !!}</h1>
      <ul>

        <li><b>Fecha de ingreso: </b>{!! date('d-m-Y',strtotime($equipo->created_at)) !!}</li>
        <li>Valor: $ ___________</li>
        <li>Abono: $ ___________</li>
        <li>Saldo: $ ___________</li>
      </ul>
    </td>
  </tr>
  <tr id="cuerpo_recibido">
    <td colspan="2">
      <h4>Datos del Cliente:</h4>
      <h5>Nombre: <small>{!! $equipo->cliente->nombres !!}</small></h5>
      <h5>Apellidos: <small>{!! $equipo->cliente->apellidos !!}</small></h5>
      <h5>Cédula: <small>{!! $equipo->cliente->cedula !!}</small></h5>
      <h5>Teléfono: <small>{!! $equipo->cliente->telefono !!}</small></h5>
      <h5>Dirección: <small>{!! $equipo->cliente->direccion !!}</small></h5>
    </td>
    <td colspan="2">
      <h4>Datos del Equipo:</h4>
      <h5>Identificador: <small>{!! $equipo->identificador !!}</small></h5>
      <h5>Marca: <small>{!! $equipo->marca->name !!}</small></h5>
      <h5>Modelo: <small>{!! $equipo->modelo !!}</small></h5>
      <h5>Color: <small>{!! $equipo->color !!}</small></h5>
      <h5>Daño: <small>{!! $equipo->descripcion !!}</small></h5>
      <h6>Los Equipos xxxxx abandonados por lo tanto <b><i>Ingxxx</i></b>, no se responsabiliza del la devolución del mismo.</h6>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <h6><b>NOTA:</b> El cliente declara ser el propietario legitimo del equipo, y que fue adquirido
        <b><i>Lítitamente</i></b>, por lo cual autoriza la reparacion en nuestro taller.</h6>
    </td>
    <td>
      <h4>Accesorios:</h4>
    </td>

    <td>


      <ul>
        <li>Chip_____</li>
        <li>Bateria_____</li>
        <li>Cargador_____</li>
      </ul>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <h5>Firma cliente</h5>
    </td>
    <td colspan="2">
      <h5>Firma conforme</h5>
    </td>
  </tr>
</table>

html css3

asked by user3821102 23.01.2018 в 16:11

source

2 answers

Friends I have that code and I get this error [closed] What would be the way to do the ngFor in angular 5

score 1 · Answer 1

I have not understood what you want to do, but I think I understand what is happening to you, to explain you I'll give you an example with 5 types of tables:

body{ font-family: sans-serif; }

h4{text-transform: uppercase; }

table{
  background: red;
  border: solid 1px gray;
  border-radius: 20px;
  font-size: 12px;
}

td{  
  background: white;
  padding: 0.5em;
  box-shadow: inset 0 0 1em lightgray;
}

.tipo2, .tipo3, .tipo4{
  border-collapse: collapse;
}

/*De esta forma haras aparecer un borde*/  
.tipo3{
  box-shadow: 0px 0px 0px 1px cyan;
}

.tipo3, .tipo4{
  overflow: hidden;
}

.tipo4 td{
  border-radius: 2em;
}

.tipo5 tr:first-child td:first-child{
  border-radius: 20px 0 0 0;
}

.tipo5 tr:first-child td:last-child{
  border-radius: 0 20px 0 0;
}

.tipo5 tr:last-child td:first-child{
  border-radius: 0 0 0 20px;
}

.tipo5 tr:last-child td:last-child{
  border-radius: 0 0 20px 0;
}

<h4>tabla tipo1</h4>
<table class="tipo1">
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
</table>
<h4>tabla tipo2</h4>
<table class="tipo2">
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
</table>
<h4>tabla tipo3</h4>
<table class="tipo3">
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
</table>
<h4>tabla tipo4</h4>
<table class="tipo4">
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
</table>
<h4>tabla tipo5</h4>
<table class="tipo5">
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
  <tr>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
    <td>contenido celda</td>
  </tr>
</table>

To all the tables I have put:

A red background
A gray border
White cells
A gray inner shadow
A rounded edge of 20px

And to the cells:

A white background
An internal spacing of 0.5em to separate the letters from the edges
And an internal shadow effect, so that the limits of the cells are noticed

The first table, type 1 , does not have a property called border-collapse which is the cause of the separation or not, between the cells of the table, as it is not applied, > You can see the red background of the table between the cells, as if they had a border . Without this property you can perfectly see the rounded edge.

The type 2 table has the property 'border-collapse' applied, which as you see does not show the rounded edge of the table because they commented to you above, The bottom of each cell hides them. This same property is applied to the table type 3 and type 4 .

The type 3 table, if we want to see the rounded edges, we simply apply a overflow: hidden to the whole table, so that what stands out from this (in this case the backgrounds of the square cells), will be "hidden" . This solution has one drawback and that is that the table had a gray border and with this property it is also hidden, but we can see the red background of it, so if you want it to look like the edges, it can be the form.

The table type 4 was mostly for you to see how the cells look with rounded edges, I do not know if you wanted to do this too, but just in case I also put it in.

Finally, the type 5 solution that you propose that each cell in each corner of the table, so that you can see the rounded edge of the table. It is not a very practical solution, but at least in this way the problem can be solved.

I think that in your case, it happens to you of the type 2 and in the 3 it would be the solution with the overflow: hidden . I hope you have clarified your doubts, tell me if it still does not solve your problem and if yes, give me a positive vote. Successes.

score 0 · Answer 2

If you put a background color on the cells that you apply the border-radius you will notice that it does apply, it just can not be seen by the color.

.tabla_recibido tr td:first-child {
  width: 150px;
  background: #511;
  padding-right: 30px;
  border-radius: 10px;
}

.tabla_recibido td:nth-child(2) {
  width: 130px;
  padding-right: 30px
}

.tabla_recibido tr:nth-child(2) {
  border-bottom: 0.5px solid
}

.tabla_recibido tr:nth-child(3) {
  border-bottom: 0.5px solid
}

.tabla_recibido tr:nth-child(4) {
  border-bottom: 0.5px solid
}

.tabla_recibido td:last-child {
  width: 250px;
  /*border-bottom-right-radius: 6px;
        border-left: 0.5px solid*/
}


/*.tabla_recibido tr:first-child td:first-child{border-top-left-radius: 20px}
    .tabla_recibido tr:first-child td:last-child{border-top-right-radius: 20px}
    .tabla_recibido tr:first-child td:only-child{border-top-right-radius: 20px; 
    border-top-left-radius: 20px}*/

.tabla_recibido h6 {
  font-size: 0.8em
}

.tabla_recibido td {
  padding: 2px;
  text-align: justify;
  /*border: 0.5px solid;*/
}

.tabla_recibido li {
  list-style: none;
}

.tabla_recibido {
  border: 1px solid;
  margin-bottom: 20px;
}

<table class="tabla_recibido">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr id="fila1">
    <td id="logo_recibido">
      <img src="../../../img/logo.png">
    </td>
    <td colspan="2">
      <h5><b>XXXXXXXX</b></h5>
      <h5>Nombre del trabajador</h5>
      <h5>Ruc: 17xxxxx</h5>
      <h5>Direccion: Avexxxxxxxxx</h5>
      <h5>Telefono: 097xxxxxxx</h5>
    </td>
    <td>
      <h3><b>Orden:</b></h3>
      <h1 id="orden"># 0000{!! $equipo->id !!}</h1>
      <ul>

        <li><b>Fecha de ingreso: </b>{!! date('d-m-Y',strtotime($equipo->created_at)) !!}</li>
        <li>Valor: $ ___________</li>
        <li>Abono: $ ___________</li>
        <li>Saldo: $ ___________</li>
      </ul>
    </td>
  </tr>
  <tr id="cuerpo_recibido">
    <td colspan="2">
      <h4>Datos del Cliente:</h4>
      <h5>Nombre: <small>{!! $equipo->cliente->nombres !!}</small></h5>
      <h5>Apellidos: <small>{!! $equipo->cliente->apellidos !!}</small></h5>
      <h5>Cédula: <small>{!! $equipo->cliente->cedula !!}</small></h5>
      <h5>Teléfono: <small>{!! $equipo->cliente->telefono !!}</small></h5>
      <h5>Dirección: <small>{!! $equipo->cliente->direccion !!}</small></h5>
    </td>
    <td colspan="2">
      <h4>Datos del Equipo:</h4>
      <h5>Identificador: <small>{!! $equipo->identificador !!}</small></h5>
      <h5>Marca: <small>{!! $equipo->marca->name !!}</small></h5>
      <h5>Modelo: <small>{!! $equipo->modelo !!}</small></h5>
      <h5>Color: <small>{!! $equipo->color !!}</small></h5>
      <h5>Daño: <small>{!! $equipo->descripcion !!}</small></h5>
      <h6>Los Equipos xxxxx abandonados por lo tanto <b><i>Ingxxx</i></b>, no se responsabiliza del la devolución del mismo.</h6>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <h6><b>NOTA:</b> El cliente declara ser el propietario legitimo del equipo, y que fue adquirido
        <b><i>Lítitamente</i></b>, por lo cual autoriza la reparacion en nuestro taller.</h6>
    </td>
    <td>
      <h4>Accesorios:</h4>
    </td>

    <td>


      <ul>
        <li>Chip_____</li>
        <li>Bateria_____</li>
        <li>Cargador_____</li>
      </ul>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <h5>Firma cliente</h5>
    </td>
    <td colspan="2">
      <h5>Firma conforme</h5>
    </td>
  </tr>
</table>

If you still want to add it with support for several browsers, you can use the following, but only applies to old browsers.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Update

If you want to put the rounded corners of the table you can do it in the following way (example taken from the following answer ):

table { 
    border: 2px solid #1FF;
    border-collapse: separate;
    border-left: 0;
    border-radius: 7px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 2px solid #F1F;    
}
td {
    border-top: 2px solid #4F1;
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 7px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 7px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>