Ich versuche, einen benutzerdefinierten Kalender in HTML und Javascript zu erstellen, in dem Sie Aufgaben von einem Tag auf den anderen ziehen und ablegen können. Ich möchte die erste Spalte und die letzten beiden Spalten als feste Breite haben und die restlichen Spalten (Montag bis Freitag) fließend haben, so dass die Tabelle immer 100% ihrer Eltern füllt.
Das Problem, das ich habe, ist, dass sich die Fluid-TDs automatisch selbst bemessen, je nachdem, wie viel Inhalt in ihnen steckt. Wenn ich also eine Aufgabe von einem Tag auf einen anderen verschiebe, ändern sich die Spaltenbreiten. Ich möchte von Montag bis Freitag unabhängig vom Inhalt und ohne Textüberlauf exakt die gleiche Größe haben: versteckt; (da die Aufgaben immer sichtbar sein müssen)
d. Ich möchte die grauen Spalten feste Breite und die roten Spalten flüssig aber einheitlich miteinander, unabhängig von dem Inhalt in ihnen.
Bearbeiten: Ich verwende jQuery für die Drag & Drop-Funktionalität, so dass eine JavaScript-Lösung auch in Ordnung wäre (obwohl dies nicht wünschenswert ist).
HTML:
%Vor%CSS:
%Vor%Mit jQuery (könnte wahrscheinlich auch mit regulären JS gemacht werden, aber ich bevorzuge es für diese Art von Jobs):
( Hinweis: Ich habe der Tabelle eine ID gegeben, so dass es einfacher zu wählen ist, kann ohne sie mit ein bisschen Bastelei gemacht werden)
%Vor%Tags und Links html css html-table fluid