Splitting DIV's over row and columns in a table

Question

Working al night fixing a problem. What I am trying to achieve is this time table:

And to be specific, I cant find a solution for row 5,6,7 in the first column. This image is from a program running in IE with Silverline and it only runs in IE.

What I already tried was using 'colspan', I tried it with the tables horizontal. I left the table completely and used only bootstrap cols and I tried a combination of both.

The best solution I could find is the combo of DIV's inside a TD.

What I have so far is that both DIV's are side by side as long as they start at the same starting time. If not, then both elements are split up in 2 TD's.

In the end each element must be draggable to drop on a different time in the table.

And the database will be updated.

My code PHP/HTML/CSS with bootstrap 4 code snippets: The generate TABLE function:

public function GuiXeduleWeekList($p_aSubArray) {    
    // ==================== Mainview classroom content =================  
    echo("<table border='1' class='table' width='100%' style='background-color:white'>"); // Create a new table
    echo("<tr><th class='text-center'>RE</th>");        
    foreach($_SESSION['aWeekdays'] as $sDay){                            
        echo("<th class='text-center'>".$sDay."</th>");// Table header                                                                            
    }
    echo("</tr>");
    for($iWeekHour = 1; $iWeekHour <= 17; $iWeekHour++){                        
        $aThisHour = $this->arraySearch($p_aSubArray, 6, $iWeekHour);
        echo("<tr>");
        echo("<th>".$iWeekHour." ".$_SESSION['aREUnits'][$iWeekHour-1]."</th>");            
        for($iDayOfTheWeek = 1;$iDayOfTheWeek<=5;$iDayOfTheWeek++){                                                            
            $aCellContent = $this->arraySearch($aThisHour, 5, $iDayOfTheWeek);                
            if(!empty($aCellContent)){
                $this->cellContent($aCellContent); 
                for($iXeduleHour = $aCellContent[0][6];$iXeduleHour <= $aCellContent[0][7];$iXeduleHour++){
                    $aContentManager[$iXeduleHour][$aCellContent[0][5]] = FALSE;
                }
            } elseif($aContentManager[$iWeekHour][$iDayOfTheWeek]) {
                echo("<td class='empty'><div id='drop_zone' ondragenter='drag_enter(event)' ondrop='drag_drop(event)' ondragover='return false' ondragleave='drag_leave(event)'></div></td>");
            }
        }                    
        echo("</tr>");
    }
    echo("</table>");                                           // End of table with schedule items            
}

The generate content function:

// A function to show the actual xedule content in the cell of the table
// @Parameters: $aCellContent   type:array      scope:local     description: Filled with the content from the database
protected function cellContent($p_aCellContent){
    $iContentCount = count($p_aCellContent);
    if($iContentCount == 1){
        $iLessonLength = ($p_aCellContent[0][7] - $p_aCellContent[0][6])+1;
        $sLesson = $this->fetchLessonName($p_aCellContent[0][2]);
        $sClassname = $this->fetchClassName($p_aCellContent[0][4]);
        $sTeacher = $this->fetchTeacher($p_aCellContent[0][3]);
        $sClassroom = $this->fetchClassroom($p_aCellContent[0][1]);        
        echo("<td draggable='true' ondragstart='drag_start(event)' ondragend='drag_end(event)' class='filled back_blue' ");            
        echo("rowspan='".$iLessonLength."' ><form method='post'>");
        echo("<input type='hidden' name='iClass' value='".$p_aCellContent[0][4]."'>");
        echo("<input type='hidden' name='iTeacher' value='".$p_aCellContent[0][3]."'>");
        echo("<input type='hidden' name='iClassroom' value='".$p_aCellContent[0][1]."'>");
        echo($sLesson."<br>");
        echo("<input type='submit' value='".$sClassname."'><br>");
        echo("<input type='submit' value='".$sTeacher."'><br>");
        echo("<input type='submit' value='".$sClassroom."'></form></td>");        
    } else {
        $iFirstRE = 17;        
        $iLastRE = 1;
        foreach($p_aCellContent as $aCellContent){
            if($aCellContent[7] > $iLastRE){
                $iLastRE = $aCellContent[7];
            }
            if($aCellContent[6] < $iFirstRE){
                $iFirstRE = $aCellContent[6];
            }
        }
        $iCellLength = ($iLastRE - $iFirstRE)+1;
        echo("<td rowspan='".$iCellLength."' class='filled back_blue'><div class='container'>");
            foreach($p_aCellContent as $aCellContent){
                $sLesson = $this->fetchLessonName($aCellContent[2]);
                $sClassname = $this->fetchClassName($aCellContent[4]);
                $sTeacher = $this->fetchTeacher($aCellContent[3]);
                $sClassroom = $this->fetchClassroom($aCellContent[1]);
                echo("<div draggable='true' ondragstart='drag_start(event)' ondragend='drag_end(event)'>");
                    echo("<form method='post'>");
                    echo("<input type='hidden' name='iClass' value='".$aCellContent[4]."'>");
                    echo("<input type='hidden' name='iTeacher' value='".$aCellContent[3]."'>");
                    echo("<input type='hidden' name='iClassroom' value='".$aCellContent[1]."'>");
                    echo($sLesson."<br>");
                    echo("<input type='submit' value='".$sClassname."'><br>");
                    echo("<input type='submit' value='".$sTeacher."'><br>");
                    echo("<input type='submit' value='".$sClassroom."'></form>"); 
                    echo("<br style='clear: left;' />");
                echo("</div>");
            }
        echo("</div></td>");
        
    }
    return;
}

The CSS

.container {
  display:      flex;
  padding:      0;
}
.container > div {
  border:       #cccccc solid 2px;    
  word-break:   break-all;
  float:        left;
  padding:      0;
  margin-right: 12px;
  margin-left:  -10px;
  margin-top:   -10px;
}

Who is out there to help me with my problem? Many thanks in advance.

Answer 1

What I already tried was using 'colspan', I tried it with the tables horizontal. I left the table completely and used only bootstrap cols and I tried a combination of both.

I'm not sure if you are aware of rowspan.

This layout is complex and using <table> and making it work for other placement of blocks in the future is even harder.

Alternatives:

• display: grid; (it doesn't work in IE but was created to solve that exact problem)
• position: absolute; and JS logic to keep a block in the right places
• I believe that some of gantt chart JS libraries would be able to display that table