Color the outline of a table

Navigation
1

This is the CSS of my Table: 

#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;
}

Which is as follows:

But the reason I come to ask for your help is this: How do I give color only to the edge of my board? The only thing that interests me is to give a color to the entire contour of my table (but not the inside) since I am using the border-radius and when entering > border-style alters my table and disappears the design that I assign, below I show how the border is from my outline :

I hope you can help me. Thanks.

    
asked by Reinos Ric 30.08.2018 в 20:36
source

4 answers

2

If you want to give a solid edge to the board here is an example of how you could do with border: 1px solid black;          border-collapse: collapse; greetings! 

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>
    
answered by 30.08.2018 в 20:59
1

To color the outline of your table in your id #customers you add this: border:1px solid red; replacing network with the color of your preference: It would look something like this:

As you can see, it respects border-radius.

This is the fragment where you must change: 

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

This works thinking that your HTML is structured like this: table have as id=customers 

<table id="customers">

</table>
    
answered by 30.08.2018 в 21:07
0

Match the edge radius of the table and the 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>
    
answered by 30.08.2018 в 23:15
0

Try the code that I do! 

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>
    
answered by 31.08.2018 в 00:42
Multiply by the boolean result of a number Exo player when changing video orientation starts from the beginning.