Fixed #3

templates/base.html

@@ -10,63 +10,16 @@
 
 <style>
 
-th {
-	text-align: left;
-	margin: 0px;
-	padding: 5px 0px 5px 0px;
-}
 
-table {
+table { 
-  width: 100%; /* Ensure the table takes full width of its container */
+    width: 100%; /* Ensure the table takes full width of its container */
-    border-collapse: collapse; /* Collapse the borders of the table */
-}
 
-#data {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.name-class {
-  max-width: 300px; 
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-/*
-#data th:nth-child(3),
-#data td:nth-child(3) {
-  max-width: 100px; 
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-} */
-
-.center-table {
-  overflow-x: auto;
 }
 
 td {
-	padding: 0px 0px 0px 0px;
+    overflow: hidden;
-	margin-left: 10px;
+    text-overflow: ellipsis;
-	height: 50px;
+    word-wrap: break-word;
-	min-width: 55px;
-  	display: table-cell;
-  	white-space: nowrap; /* Prevent text wrapping */
-  	overflow: hidden; /* Hide overflow content */
-  	text-overflow: ellipsis; /* Display ellipsis for overflow content */
-}
-
-
-.hidden-mobile {
-  display: table-cell;
-}
-
-.table-container {
-  overflow-x: auto; /* Enable horizontal scrolling */
-}
-
-.table-wrapper {
-  overflow-x: auto; /* Enable horizontal scrolling */
 }
 
 @media only screen and (min-width: 600px) {
@@ -76,44 +29,17 @@ td {
   }
 
 }
-@media only screen and (max-width: 600px) {
-  table {
-    width: auto; /* Expand table to full width on mobile */
-  }
-  .center-table {
-    overflow-x: auto; /* Enable horizontal scrolling */
-  }
-  
-  .fixed-width {
-    width: 100%;
-  }
-
-    td:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    background-color: #fff; /* Make the first column background white */
-  }
 
 
-  .hidden-mobile {
+@media only screen and (max-width: 480px) {
-    display: none;
+    /* horizontal scrollbar for tables if mobile screen */
-  }
+    .hidden-mobile {
+  	display: none;
+    }
+
 }
 
 
-.centered-cell {
-  text-align: center; /* Center the content horizontally within the cell */
-}
-
-
-
-.highlighted {
-	  background-color: yellow; /* Adjust as needed */
-}
-
-
-
 
 
 
@@ -140,13 +66,6 @@ background-color: white;
 	padding: 16px;
 }
 
-/* Table */
-td img{
-    display: block;
-    margin-left: auto;
-    margin-right: 5px;
-
-}
 
 .inputContainer {
 	  display: inline-block; /* Display as an inline block */
@@ -248,7 +167,7 @@ td img{
           Home
         </a>
     
-        <a class="navbar-item hidden-desktop" id="expand-button">
+        <a class="navbar-item hidden-1desktop" id="expand-button">
           Expand Columns
         </a> 
         

templates/table.html

@@ -1,15 +1,15 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="center-table" >
+ <div style="overflow-x:auto;">
-<table id="data" class="table">
+<table id="data" class="table tablemobile">
     <thead>
       <tr>
-        <th class="fixed-width"></th>
+        <th style="width:65px;">Image</th>
-        <th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th>
+        <th class="hidden-mobile name-class">Name</th>
-        <th class="fixed-width hidden-mobile">Color</th>
+        <th class="hidden-mobile">Color</th>
-        <th class="fixed-width" style="text-align: center;">Qty</th>
+        <th>Qty</th>
-        <th class="fixed-width" style="text-align: center;">Missing</th>
+        <th style="text-align:center;">Missing</th>
       </tr>
     </thead>
     <tbody>
@@ -18,13 +18,13 @@
           {% if brick[5] == 'nil' %}
           <td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
           {% else %}
-          <td><img src="{{ '/static/parts/' + brick[5] + '.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;"loading="lazy"></td>
+          <td style="width:65px;height:55px;"><img src="{{ '/static/parts/' + brick[5] + '.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;"loading="lazy"></td>
           {% endif %}
 
-          <td style="text-align:left;margin:0px;width:100%;" class="hidden-mobile name-class">{{ brick[3] }}</td>
+          <td style="text-align:left;" class="hidden-mobile name-class">{{ brick[3] }}</td>
-          <td style="white-space: nowrap;" class="hidden-mobile">{{ brick[7] }}</td>
+          <td style="text-align:left;white-space: nowrap;" class="hidden-mobile">{{ brick[7] }}</td>
           <td style="text-align: center;">{{ brick[8] }}</td>
-          <td class="centered-cell">
+          <td style="text-align:right;" class="centered-cell">
             <div class="inputContainer">
               {% set ns = namespace(count='') %}
               <form id="number-form">