Tabela com header fixo


Name Color Description
Apple Red These are red.
Pear Green These are green.
Grape Purple / Green These are purple and green.
Orange Orange These are orange.
Banana Yellow These are yellow.
Kiwi Green These are green.
Plum Purple These are Purple
Watermelon Red These are red.
Tomato Red These are red.
Cherry Red These are red.
Cantelope Orange These are orange inside.
Honeydew Green These are green inside.
Papaya Green These are green.
Raspberry Red These are red.
Blueberry Blue These are blue.
Mango Orange These are orange.
Passion Fruit Green These are green.


Html:

	
Name Color Description
Apple Red These are red.
Pear Green These are green.
Grape Purple / Green These are purple and green.
CSS:

	
.fixed_headers {
	width: 750px;
	table-layout: fixed;
	border-collapse: collapse;
} 
 
.fixed_headers th { text-decoration: underline; }
  
.fixed_headers th, .fixed_headers td {
    padding: 5px;
    text-align: left;
}
  
.fixed_headers td:nth-child(1), th:nth-child(1) { min-width: 200px; }
.fixed_headers td:nth-child(2), th:nth-child(2) { min-width: 200px; }
.fixed_headers td:nth-child(3), th:nth-child(3) { width: 350px; }

.fixed_headers thead {
    background-color: #333;
    color: #FDFDFD;
}

.fixed_headers thead tr {
	display: block;
	position: relative;
}

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

.fixed_headers tbody tr:nth-child(even) {
    background-color: #DDD;
}





Comentários

Copyright © 2018 Anderson Bravo
www.andersonbravo.com.br
anderson@andersonbravo.com.br