Frage HTML - Spaltenbreiten von zwei Tabellen synchronisieren

mathieu_91 · 6 Oktober 2016

Hallo,

ich bin neu auf dem Gebiet von HTML, PHP, CSS und co. und möchte mein Aufgabenmanagementtool von Excel (VBA Programmierung) in ein DB basiertes System umbauen, mit Online/Browser Anwendung.

Konnte bisher ein wenig Code zusammensuchen, basteln und erste Versuche starten.
Datei ist als .php gespeichert und wird auf einer MySQL DB ausgeführt.

Ziel ist:
-Ein Header und eine Sidebar, beide fix gegenüber horizontalem und vertikalem Scrollen.
-Eine Tabelle <th></th> fix gegenüber vertikalem Scrollen, damit die oberste Zeile immer sichtbar ist
-Eine Tabelle <td></td> die gescrollt werden kann.

Mein Ansatz:
-Mein Bereich ist in 3 Bereichen unterteilt. Top, Left, Right
-Top=Header
-Left=Toolbar bzw. Sidebar
-Right=Tabellenbereich
-4. Bereich unter Header wo die Headzeile als eigenständige Tabelle liegt
-2. Tabelle in Right ohne Headzeile.
-2. Tabelle kann auf Knopfdruck erweitert werden.

Problem:
-Sidebar ist nicht fix
-1. Tabelle und 2. Tabelle haben nicht die gleiche Spaltenbreite
-Wenn ich das Browserfenster ändere, von den Dimensionen, verschiebt sich alles ins unschöne.
-Headzeile, also Tabelle 1 ist ebenfalls nicht fix

Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>

 <script language="JavaScript1.2"> //Java Script für das Erweitern der Tabelle auf Knopfdruck

 function clone_this_dim(){

  NewRow = document.getElementById('tabdim').lastChild.cloneNode(true);

  document.getElementById('tabdim').appendChild(NewRow);

  var i = document.getElementById('tabdim').childNodes.length;

  for(j=0;j<document.getElementById('tabdim').lastChild.getElementsByTagName('input').length;j++){

   if(j == 0){
    var spalte = 'c_measures';
   }
   else if(j == 1){
    var spalte = 'tolerance';
   }
   else if(j == 2){
    var spalte = 'f_result';
   }
   var zeile = 'dim_';

   var newname = zeile + spalte + i;

   document.getElementById('tabdim').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname);

   //var name = document.getElementById('tabdim').lastChild.getElementsByTagName('input')[j].name;

   document.getElementById('tabdim').lastChild.getElementsByTagName('input')[j].value='';

   document.getElementById('dim_zeilen').setAttribute('value', i);

  }
 }

 </script>

 <style>

  .clear{
   clear:both;
  }

  .main{
   width: 100%;
  }

  .left {
   float:left;
   width: 10%;
   height:100%;
   background: rgb(200,216,224);
  }

  .right{
   float:right;
   width:90%;
   height:92%;
   background:  rgb(255,255,255);
  }

   table, th, td { border: 1px solid;
   text-align: center;
   border-collapse: collapse;
  }

  body {
   padding: 4.1% 0 0%;
   overflow-y: scroll;
  }
 
  body,
  .wrapper {
   height:5% auto;
   margin: 10px auto;
  }
 
  headrow{
   top: 5%;
   left: 10%;
   height:10%;
   width:100%;
  }
  maintable, td { border: 1px solid;
   text-align: center;
   border-collapse: collapse;
  }
 
  header {
   background-color: rgb(180,180,180);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height:5%;
  }

  button {
   margin: 0 2em;
  }
 
 </style>

 <header>
  <div class="wrapper">
   Mein Projekt
  </div>
 </header>

</head>

<body>
 <div class="main"></div>
 
 <div class="left"> //Sidebar mit Button
  <form>
   <input type="hidden" name="dim_zeilen" id="dim_zeilen" value="1"><input type="button" value=" + " onClick="clone_this_dim()">
  </form>
 </div>
 
 <div class="right"> //Kopfzeile der Tabelle, fix gegenüber vertikalem scrollen
  <div class="headrow">
   <table width="100%">
     <tr>
    <th>Item No.</th>
    <th>Date</th>
    <th>Project</th>
    <th>Priority</th>
    <th>Current Topic</th>
    <th>Sub-Topic</th>
    <th>Measures</th>
    <th>Actions Taken</th>
    <th>Deadline</th>
    <th>Responsible</th>
    <th>Status</th>
     </tr>
   </table>
  </div>
  <form method="post" name="test">

   <table width="100%" id="tabdim" class="maintable"> //Haupttabelle

    <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>

    <tr>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
     <td><font size="1">&nbsp;</font></td>
    </tr>

   </table>
  </form>

 </div>
 <div class="clear"></div>
 </div>

</body>
</html>

Über ein paar Tipps würde ich mich freuen.

Viele Grüße

Mathieu

EDIT:

Planänderung.
Habe den Aufbau nochmal überarbeitet und bin zu den Schluss gekommen, dass diese zwei Tabellen Lösung nicht notwendig ist.

Jetzt habe ich aber ein anderes Problem.

Der Code ist ein wenig gewachsen. Muss noch lernen es auf einzelne Dateien zu splitten und eine Styledatei .css zu erzeugen, das nimmt nämlich viel Platz ein.

Für erste Versuche muss das aber für mich reichen.

Und zwar passiert nun folgendes: Wenn ich eine neue Zeile mit dem Add Item Button hinzufüge, dann verbindet er den äußeren Rahmen der Tabelle, was ich nicht möchte.

Was ist die maximale Größe für Bilder beim Hochladen? 50kb sind wohl noch zu groß, finde auch keine Regeln dazu...

Frage HTML - Spaltenbreiten von zwei Tabellen synchronisieren

mathieu_91

Neues Mitglied

Neueste Beiträge