Mock up Cursos Fit Poblacion por campus v2

by Benjamín Xolotl Torres Luna

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<body>
  <h1>Visualización de población de materia por campus</h1>
	<div class="barra-busqueda">
	
	<label for="periodo">Periodo</label>
	<select name="periodo" id="periodo">
      <option>201711</option>
      <option>201712</option>
      <option>201713</option>
      <option>201811</option>
    </select>
  Materia: <input type="text"  placeholder="Escribe cualquier cosa" name="materia">
	<button id="search" class="search-button" name="search" onclick="muestraTabla();">Buscar</button>
	
	</div>

  <table id="example" class="escondido" cellspacing="0" width="100%">
    <thead>
      <tr class="tableizer-firstrow">
        <th></th>
        <th>Aguascalientes</th>
        <th>Chiapas</th>
        <th>Chihuahua</th>
        <th>Ciudad de México</th>
        <th>Ciudad Juárez</th>
        <th>Ciudad Obregón</th>
        <th>Colima</th>
        <th>Cuernavaca</th>
        <th>Cumbres</th>
        <th>Estado de México</th>
        <th> Eugenio Garza Lagüera</th>
        <th>Eugenio Garza Sada</th>
        <th>Guadalajara</th>
        <th>Hidalgo</th>
        <th>Irapuato</th>
        <th>Laguna</th>
        <th>León</th>
        <th>Matamoros</th>
        <th>Mazatlán</th>
        <th>Monterrey</th>
        <th>Morelia</th>
        <th>Puebla</th>
        <th>Querétaro</th>
        <th>Saltillo</th>
        <th>San Luis Potosí</th>
        <th>Santa Catarina</th>
        <th>Santa Fe</th>
        <th>Sinaloa</th>
        <th>Sonora Norte</th>
        <th>Tampico</th>
        <th>Toluca</th>
        <th>Valle Alto</th>
       ...

CSS

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  text-align: center;
  color: #0065A9;
}

th {
  padding: 10px 6px 10px 6px;
  text-align: center;
  background-color: #0065A9;
  color: white;
}

table,
td {
  text-align: center;
  border: 1px solid #DDDDDD;
}

tfoot,
.total {
  font-weight: bold;
  color: red;
}

.escondido {
  display: none;
}

.search-button {
  padding: 2px 2px 2px 2px;
  width: 120px;
}
.barra-busqueda {
  padding: 5px 5px 5px 5px;
  text-align: center;
}

tr:nth-of-type(even){
	background: #EEEEEE;
}

JavaScript

function muestraTabla() {
  var tablaMostrar = document.getElementById('example');
    tablaMostrar.style.display = 'table';
}

$(".search-button").button({
  icon: "ui-icon-search"
});