Tecnologia

Tabela com header fixo

Name Color
Apple Red
Pear Green
Grape Purple / Green
Orange Orange
Banana Yellow
Kiwi Green
Plum Purple
Watermelon Red
Tomato Red
Cherry Red
Cantelope Orange
Honeydew Green
Papaya Green
Raspberry Red
Blueberry Blue
Mango Orange
Passion Fruit Green


HTML:

	
‹table class="fixed_headers"›
  ‹thead›
    ‹tr›
      ‹th›Name‹/th›
      ‹th›Color‹/th›
      <‹th››Description‹/th›
    ‹/tr›
  ‹/thead›
  ‹tbody›
    ‹tr›
      ‹td›Apple‹/td›
      ‹td›Red‹/td›
      ‹td›These are red.‹/td›
    ‹/tr›
    ‹tr›
      ‹td›Pear‹/td›
      ‹td›Green‹/td›
      ‹td›These are green.‹/td›
    ‹/tr›
    ‹tr›
      ‹td›Grape‹/td›
      ‹td›Purple / Green‹/td›
      ‹td›These are purple and green.‹/td›
    ‹/tr›
  ‹/tbody›
‹/table›

CSS:


.fixed_headers {
	width: 750px;
	table-layout: fixed;
	border-collapse: collapse;
} 
 
.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;
}
2020 © B85 Tecnologia
eu@andersonbravo.com.br