1

Este es el CSS de mi Tabla:

#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-spacing: 0; 
    width: 100%;
}

#customers td, #customers th {
    padding: 8px;
    text-align: center;
}

#customers tr:nth-child(even){
    background-color: #f2f2f2;
    }

#customers tr:hover {
background: #e8f2fd;
  transition: all 0.1s ease-in-out; 
}

#customers th:first-child {
    border-radius: 8px 0 0 0;
}

#customers th:last-child {
    border-radius: 0 6px 0 0;
}

#customers th:only-child{
    border-radius: 6px 6px 0 0;
}

#customers th{
    background-color: #00889f;
    color: white;
}

La cual queda de la siguiente manera:

introducir la descripción de la imagen aquí

Pero la razón de la que vengo a pedir de su ayuda es la siguiente: ¿Como le doy solamente color al borde de mi tabla?. Lo único que me interesa es darle un color en todo el contorno de mi tabla (mas no lo de adentro) ya que estoy utilizando el border-radius y al ingresar border-style altera mi tabla y desaparece el diseño que le asigno, a continuación muestro como queda el border de mi contorno: introducir la descripción de la imagen aquí

Espero que puedan ayudarme. Gracias.

2
  • Redacta mejor la última parte, no se entiende lo que necesitas. ¿Preguntas por el borde del final? ese sería border-bottom: 1px solid #color; el 30 ago. 2018 a las 18:42
  • Hola @EdgarGutiérrez Gracias, me distraje y redacte mal, ya escribí el verdadero problema que tengo: A todo el borde le quisiera darle un color, tengo redondeado las equinas, pero al asignarle un "border-style:solid" desaparece el estilo los bordes redondeados y no se como dar ese cambio.
    – Reinos Ric
    el 30 ago. 2018 a las 18:51

4 respuestas 4

2

si lo que quieres es darle un borde solido a la tabal aqui te dejo un ejemplo de como podrias hacer con border: 1px solid black; border-collapse: collapse; saludos!

table {
    width:100%;
}
table {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color: #fff;
}
table#t01 th {
    background-color: black;
    color: white;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing especifica el espacio de las casillas .</p>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>trata de cambiar  el border-spacing a 5px.</p>

</body>
</html>

1
  • Hola amigo: Gracias pero tu respuesta no ayuda mucho a mi problema, acabo de actualizar mi pregunta por si deseas observar.Gracias
    – Reinos Ric
    el 30 ago. 2018 a las 21:06
1

Para darle color al contorno de tu tabla en tu id #customers agregas esto: border:1px solid red; remplazando red por el color de tu preferencia: Quedaria algo así: introducir la descripción de la imagen aquí

Como se puede observar respeta los border-radius.

Este es el fragmento donde debes cambiar:

#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-spacing: 0; 
    width: 100%;
    border:1px solid red;
}

Esto funciona pensando que tu HTML esté estructurado así: table tenga como id=customers

<table id="customers">

</table> 
2
  • Hola amigo: Acabo de actualizar mi pregunta, ya que le añadí el "border:1px solid red;" pero no da el efecto de curva de las esquinas, agregue imagen que muestra el problema. Gracias
    – Reinos Ric
    el 30 ago. 2018 a las 21:05
  • Agrega tu código HTML de como estructuras tu tabla. De echo yo probé el código y funciona como se puede ver la imagen de mi respuesta. el 30 ago. 2018 a las 21:08
0

Igualar el radio de bordes de la tabla y los headers

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-spacing: 0;
  width: 100%;
  border: 1px solid red;
  border-radius: 6px 6px 0 0;
}

#customers td,
#customers th {
  padding: 8px;
  text-align: center;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background: #e8f2fd;
  transition: all 0.1s ease-in-out;
}

#customers th:first-child {
  border-radius: 6px 0 0 0;
}

#customers th:last-child {
  border-radius: 0 6px 0 0;
}

#customers th:only-child {
  border-radius: 6px 6px 0 0;
}

#customers th {
  background-color: #00889f;
  color: white;
}
<body>
  <table id="customers">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </tbody>
  </table>

</body>

0

Prueba con el código que hago yo!

table {
    width:100%;
}/******Este es el codigo que cambias!********/
table {
    border: 2px solid red;
    border-radius: 5px;
   /***************/
}
th, td {
    padding: 15px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color: #fff;
}
table#t01 th {
    background-color: black;
    color: white;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing especifica el espacio de las casillas .</p>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>


</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.