Adjust css html table

Question

Adjust css html table

Navigation

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

1

I'm working on a table from HTML and CSS, what I needed was for the header to be fixed which is already there but the body can not adjust it to the size of the header of the table.

This is what I have:

load/* main elements */

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

/* ::-webkit-scrollbar-track { */
/*       background-color: blue; */
/* } */

::-webkit-scrollbar {
      width: 10px;
      height: 10px;
}

/* ::-webkit-scrollbar-button {  */
/*        background-color: navy;  */
/*  }  */

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 200px;
} 

table th {
	font-size: 1.1em;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	background: #0093e2;
	border-radius: 6px;
	border: 100px;
	padding: 6px;

}

}


.header_fijo {


}


.header_fijo table tbody {
 display: block;
 overflow: auto;
 width: 100%;
 height: 100px;
}

  <div class="header_fijo ">
  <table>
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
    <th>Savings</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
    <td>$180</td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
 </tbody>
</table>
  </div>

html css html-tabla

asked by Paula Marín 02.01.2018 в 05:57

source

4 answers

0

However just doing what Joel said does not work, here I have checked the code and I have made the solution, try it and if it works you qualify;)

    load/* main elements */

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

    /* ::-webkit-scrollbar-track { */
    /*       background-color: blue; */
    /* } */

    ::-webkit-scrollbar {
          width: 10px;
          height: 10px;
    }

    /* ::-webkit-scrollbar-button {  */
    /*        background-color: navy;  */
    /*  }  */

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 200px;
    } 

    table th {
    	font-size: 1.1em;
    	text-align: center;
    	font-weight: bold;
    	color: #FFFFFF;
    	background: #0093e2;
    	border-radius: 6px;
    	border: 100px;
    	padding: 6px;

    }

    }


    .header_fijo {
width: 100%;

    }


    .header_fijo .tabla_resultados {
     display: block;
     overflow: auto;
     width: 100%;
     height: 100px;
    }

<div class="header_fijo ">
  <table class="tabla_resultados">
 <thead>
  <tr>
 <th>Month</th>
 <th>Savings</th>
<th>Savings</th>
  </tr>
 </thead>
 <tbody>
  <tr>
 <td>January</td>
 <td>$100</td>
<td>$180</td>
  </tr>
  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>  <tr>
 <td>February</td>
 <td>$80</td>
<td>$180</td>
  </tr>
 </tbody>
</table>
  </div>



<!-- begin snippet: js hide: false console: true babel: false -->

I tried it on the OS compiler and it worked

answered by 02.01.2018 в 06:14

0

On the line of CSS

.header_fijo tbody { 
  display: block;// Eliminar
  overflow: auto;
  width: 100%;
  height: 100px;
}

It will look for the child tbody correctly, but it has a property display: block; that is not necessary and is what originates this result. you should remove this property because you want to only display the rows and no style was applied to thead . remember that the default value of the display property for thead is display : table-header-group; and for tbody display :table-row-group;

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

/* ::-webkit-scrollbar-track { */
/*       background-color: blue; */
/* } */

::-webkit-scrollbar {
      width: 10px;
      height: 10px;
}

/* ::-webkit-scrollbar-button {  */
/*        background-color: navy;  */
/*  }  */

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 200px;
} 

table th {
  font-size: 1.1em;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  background: #0093e2;
  border-radius: 6px;
  border: 100px;
  padding: 6px;

}

.header_fijo {


}

.header_fijo  tbody {
 overflow: auto;
 width: 100%;
 height: 100px;
}

<div class="header_fijo ">
  <table>
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
    <th>Savings</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
    <td>$180</td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
 </tbody>
</table>
  </div>

Although to comply with the tbody the style height: 100px; and overflow: auto; should apply the display:block to both, both for thead as tbody

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

/* ::-webkit-scrollbar-track { */
/*       background-color: blue; */
/* } */

::-webkit-scrollbar {
      width: 10px;
      height: 10px;
}

/* ::-webkit-scrollbar-button {  */
/*        background-color: navy;  */
/*  }  */

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 200px;
} 

table th {
  font-size: 1.1em;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  background: #0093e2;
  border-radius: 6px;
  border: 100px;
  padding: 6px;

}

.header_fijo thead{
  display: block;
}

.header_fijo  tbody {
 display: block;
 overflow: auto;
 width: 100%;
 height: 100px;
}

<div class="header_fijo ">
  <table>
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
    <th>Savings</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
    <td>$180</td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
 </tbody>
</table>
  </div>

answered by 02.01.2018 в 06:04

0

You can try it with this method of the same blog that Edgar links but much more "current" and simple both in the way to achieve it and in the behavior of the table: link

Greetings

answered by 06.01.2018 в 14:58

Clone rows in JQuery but with different ID Associative lists in Python?

score 2 · Accepted Answer

I've been looking for information about how to do it without js, but I've only seen a demo that does what you need and it's here: link and is perhaps a bit more complex than you would suppose.

The certain thing is that when converting the tbody into a block element, it loses the connection it had with the cell sizes defined in thead and that is why they do not keep the size ratio, you should restore it manually

So to keep the header fixed, the quickest solution I can think of is that you have to go back to the thead in block element as well.

.header_fijo thead{ display: block;}

To all the elements of the table I would apply a css3 box model and a fixed layout:

.header_fijo *{box-sizing: border-box; table-layout: fixed;}

And it would be your turn to give the cells the same size, like this:

.header_fijo tr>*{ width: 100px }

Finally correct in the last cell of the row of the header the width of the scroll that you defined before like this:

.header_fijo thead th:last-child{ width: 110px }

It is 110px, because it is the sum of the size of the cells + the 10px that you gave width to the scroll. Here is an example:

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

/* ::-webkit-scrollbar-track { */
/*       background-color: blue; */
/* } */

::-webkit-scrollbar {
      width: 10px;
      height: 10px;
}

/* ::-webkit-scrollbar-button {  */
/*        background-color: navy;  */
/*  }  */

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 200px;
} 

table th {
	font-size: 1.1em;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	background: #0093e2;
	border-radius: 6px;
	border: 100px;
	padding: 6px;
}

/*Desde aquí agregue los estilos*/

.header_fijo *{
  box-sizing: border-box;  
  /*border-collapse: collapse;*/
  table-layout: fixed;
}

.header_fijo thead, 
.header_fijo tbody{
  display: block;
}

.header_fijo tbody {
 overflow: auto;
 height: 100px;
}

.header_fijo tr>*{
 width: 100px;
}

/*corregir el espacio del scroll a la izquierda del tbody*/
.header_fijo thead th:last-child{
  width: 110px;
}

<div class="header_fijo ">
  <table>
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
    <th>Savings</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
    <td>$180</td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
 </tbody>
</table>
  </div>

Or define a measure for each column like this:

.header_fijo tr>*:nth-child(1){ width: 120px } /*la medida que gustes*/
.header_fijo tr>*:nth-child(2){ width: 100px } /*la medida que gustes*/
.header_fijo tr>*:nth-child(3){ width: 90px } /*la medida que gustes*/

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

/* ::-webkit-scrollbar-track { */
/*       background-color: blue; */
/* } */

::-webkit-scrollbar {
      width: 10px;
      height: 10px;
}

/* ::-webkit-scrollbar-button {  */
/*        background-color: navy;  */
/*  }  */

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 200px;
} 

table th {
	font-size: 1.1em;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	background: #0093e2;
	border-radius: 6px;
	border: 100px;
	padding: 6px;
}

/*Desde aquí agregue los estilos*/

.header_fijo *{
  box-sizing: border-box;  
  /*border-collapse: collapse;*/
  table-layout: fixed;
}

.header_fijo thead, 
.header_fijo tbody{
  display: block;
}

.header_fijo tbody {
 overflow: auto;
 height: 100px;
}

.header_fijo tr>*:nth-child(1){
 width: 120px;
}
.header_fijo tr>*:nth-child(2){
 width: 100px;
}
.header_fijo tr>*:nth-child(3){
 width: 90px;
}

/*corregir el espacio del scroll a la izquierda del tbody*/
.header_fijo thead th:last-child{
  width: calc(90px + 10px); /*estoy sumando el ancho del scroll*/
}

<div class="header_fijo ">
  <table>
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
    <th>Savings</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
    <td>$180</td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
     <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>  <tr>
     <td>February</td>
     <td>$80</td>
    <td>$180</td>
  </tr>
 </tbody>
</table>
  </div>