Alineacion columnas

app/src/components/data/DegreeDay/index.tsx

@@ -47,17 +47,15 @@ const DegreeDay: FC<DegreesProps> = () => {
       <h5>
         Grados días promedio mensuales - {data ? data[0].station.title : null}
       </h5>
-      <table className={classes.table}>
+      <table className={`${classes.table} ${classes.widthSeven}`}>
         <thead>
-          <tr>
-            <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
-            <td className={classes.cell}>Octubre</td>
-            <td className={classes.cell}>Noviembre</td>
-            <td className={classes.cell}>Diciembre</td>
-            <td className={classes.cell}>Enero</td>
-            <td className={classes.cell}>Febrero</td>
-            <td className={classes.cell}>Marzo</td>
-          </tr>
+          <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
+          <td className={classes.cell}>Octubre</td>
+          <td className={classes.cell}>Noviembre</td>
+          <td className={classes.cell}>Diciembre</td>
+          <td className={classes.cell}>Enero</td>
+          <td className={classes.cell}>Febrero</td>
+          <td className={classes.cell}>Marzo</td>
         </thead>
         <tbody>{data && rows}</tbody>
       </table>

app/src/components/data/GeneralPerSeason/index.tsx

@@ -71,7 +71,7 @@ const TemperaturePerSeason: FC = () => {
   return (
     <>
       <h5>General - {data ? data[0].station.title : null}</h5>
-      <table className={classes.table}>
+      <table className={`${classes.table} ${classes.widthSix}`}>
         <Header daysToMatchCurrentTemperature={true} />
         <tbody>{data && rows}</tbody>
       </table>

app/src/components/data/GeneralPerSector/index.tsx

@@ -29,7 +29,9 @@ const GeneralPerSector: FC = () => {
     <tr key={x.station.station_code}>
       <th
         className={classes.cell}
-        style={{ color: x.station.station_code === sector ? "#0d6efd" : undefined }}
+        style={{
+          color: x.station.station_code === sector ? "#0d6efd" : undefined,
+        }}
       >
         {x.station.title}
       </th>
@@ -79,7 +81,7 @@ const GeneralPerSector: FC = () => {
   // Tabla
   return (
     <>
-      <table className={classes.table}>
+      <table className={`${classes.table}`}>
         <Header daysToMatchCurrentTemperature={false} />
         {/* Mostrar las filas si hay data */}
         <tbody>{data && rows}</tbody>

app/src/components/data/Precipitation/index.tsx

@@ -47,17 +47,15 @@ const Precipitation: FC<PrecipitationProps> = () => {
     <section>
       <h5>Precipitaciones mensuales - {data ? data[0].station.title : null}</h5>
 
-      <table className={classes.table}>
+      <table className={`${classes.table} ${classes.widthSeven}`}>
         <thead>
-          <tr>
-            <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
-            <td className={classes.cell}>Octubre</td>
-            <td className={classes.cell}>Noviembre</td>
-            <td className={classes.cell}>Diciembre</td>
-            <td className={classes.cell}>Enero</td>
-            <td className={classes.cell}>Febrero</td>
-            <td className={classes.cell}>Marzo</td>
-          </tr>
+          <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
+          <td className={classes.cell}>Octubre</td>
+          <td className={classes.cell}>Noviembre</td>
+          <td className={classes.cell}>Diciembre</td>
+          <td className={classes.cell}>Enero</td>
+          <td className={classes.cell}>Febrero</td>
+          <td className={classes.cell}>Marzo</td>
         </thead>
         <tbody>{data && rows}</tbody>
       </table>

app/src/components/data/shared.tsx

@@ -18,21 +18,41 @@ export const TableHeader: FC<tableHeaderProps> = ({
   daysToMatchCurrentTemperature,
 }) => {
   return (
-    <thead>
+    <thead style={{ minHeight: "90px" }}>
       <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
       <td style={{ padding: "0" }} className={classes.cell}>
-        <table style={{ width: "100%" }}>
-          <tr>
-            <td colSpan={100}>% Horas segun temperatura</td>
-          </tr>
-          <tr>
-            <td style={{ backgroundColor: blueScale([])(1).css() }}>&lt;10%</td>
-            <td style={{ backgroundColor: orangeScale([])(1).css() }}>
-              &gt;30%
-            </td>
-            <td style={{ backgroundColor: redScale([])(1).css(), color: "white" }}>&gt;33%</td>
-          </tr>
-        </table>
+        <div className="d-block h-100">
+          <div className="h-75">
+            <div className="row">
+              <td colSpan={100}>% Horas segun temperatura</td>
+            </div>
+          </div>
+          <div className="h-25">
+            <div className="row mx-0 h-100">
+              <div
+                className="col-4"
+                style={{ backgroundColor: blueScale([])(1).css() }}
+              >
+                &lt;10&deg;
+              </div>
+              <div
+                className="col-4"
+                style={{ backgroundColor: orangeScale([])(1).css() }}
+              >
+                &gt;30&deg;
+              </div>
+              <div
+                className="col-4"
+                style={{
+                  backgroundColor: redScale([])(1).css(),
+                  color: "white",
+                }}
+              >
+                &gt;33&deg;
+              </div>
+            </div>
+          </div>
+        </div>
       </td>
 
       <td

app/src/components/data/tables.module.css

@@ -1,10 +1,31 @@
 .table {
-  /* Esto es para que las tablas nesteadas tengan ancho y alto 100%
-   * No tengo idea de por que funciona
-   * */
-  height: 1px;
   width: 100%;
-  table-layout: fixed;
+  display: grid;
+}
+
+.table tr,
+.table thead {
+  display: grid;
+  grid-template-columns: 180px 180px 1fr 1fr 1fr;
+}
+
+.widthSix.table tr,
+.widthSix.table thead {
+  grid-template-columns: 180px 180px 1fr 1fr 1fr 1fr;
+}
+
+.widthSeven.table tr,
+.widthSeven.table thead {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.table .threeSlot {
+  display: grid;
+  grid-template-columns: repeat(3, 30%);
+}
+
+.table .oneSlot {
+  display: block;
 }
 
 .table * {
@@ -16,19 +37,21 @@
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
+.table .tdGroup,
 .tdGroup td {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.table .tdGroup,
 .tdGroup table {
   height: 100%;
   width: 100%;
 }
 
 .cell {
-  padding: 5px 10px;
+  padding: 5px 0;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
@@ -36,6 +59,6 @@
   white-space: nowrap;
 }
 
-.dateCell {
-  width: 17%;
-}
+/* .dateCell { */
+/*   width: 17%; */
+/* } */