Отзывчивые таблицы - метка данных все еще отображается на пустых полях и сворачивается сама по себе

Question

/* ------------------ */
/* TABLE           -- */
/* ------------------ */

.table { 
	width: 100%; 
	margin-bottom: 50px; 
	background-color: #3f3f3f; 
	border-bottom: 1px solid dodgerblue; 
}

.table td,
.table th { 
	padding: 10px; 
	border: 1px solid darkcyan; 
}

.table tr:nth-child(even) { background-color: #373737; }
.table thead tr { background-color: darkslategrey; }
.table tbody th { background-color: #304848; }

/* ------------------ */
/* TABLE TWO       -- */
/* ------------------ */

@media ( max-width: 600px){
	
	/* hide column headers. they'll be replaced by data-label */
	.bendy tbody th { display: none; }
	
	.bendy tbody tr:first-child, 
	.bendy tbody tr:last-child { border-bottom: none;	}
	
	.bendy tbody tr { 
		display: block;
		border-bottom: 1px solid darkorange; 
	}
	
	.bendy td { 
		display: block;
		position: relative;
		
		
		width: calc(100% - 50%);
		padding-left: 50%;
		
		border: none;
		border-bottom: 1px dashed rgba(255,255,255, 0.2);
	}
	
	.bendy td:last-child { border-bottom: none; }

	.bendy td:before {
		content: attr(data-label);
		position: absolute;
		left: 10px; top: 10px; 
		width: 45%; 
		color: #aaa;
		text-transform: uppercase;
		white-space: normal;
	}
}

<table class="table bendy">
                <thead>
                    <tr>
                        <th colspan="12">Shift 1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Depot</th>
                        <th>Name</th>
                        <th>TMF</th>
                        <th>TMO</th>
                        <th>12A</th>
                        <th>12B</th>
                        <th>12D</th>
                        <th>TTMBC</th>
                        <th>IPV Live Lane</th>
                        <th>IPV Non Live Lane</th>
                        <th>License</th>
                        <th>Tow</th>
                    </tr>
                </tbody>
                <?php 
                 $link = mysqli_connect("localhost", "username", "Password", "Login");
                 if($link === false){
                     die("ERROR: Could not connect. " . mysqli_connect_error());
                 }

                 $sql = "SELECT depot, name, tmf, tmo, 12a, 12b, 12d, ttmbc, ipvlive, ipvnonlive, license, tow FROM operatives WHERE (shift=1 AND ttmbc='YES') ORDER BY depot Asc";
                 $result = $link-> query($sql);
     
                 if ($result-> num_rows > 0) {
                     while ($row = $result-> fetch_assoc()) {
                         echo "<tr><td data-label='Depot'>" . $row["depot"] . "</td><td data-label='Name'>" . $row["name"] . "</td><td data-label='TMF'>" . $row["tmf"] . "</td><td data-label='TMO'>" . $row["tmo"] . "</td><td>" . $row["12a"] . "</td><td>" . $row["12b"] . "</td><td>" . $row["12d"] . "</td><td>"
                         . $row["ttmbc"] . "</td><td>" . $row["ipvlive"] . "</td><td>" . $row["ipvnonlive"] . "</td><td>" . $row["license"] . "</td><td>" . $row["tow"] . "</td></tr>";
                     }
                     echo "</table>";
                 }
                 else {
                     echo "0 results";
                 }
                 mysqli_close($link);
                 ?>
            </table>

Доброе утро,

Я надеялся, что кто-нибудь сможет помочь. У меня есть таблица, которая извлекает данные таблицы из Mysql, на которой она работает отлично, у меня проблема в том, что когда я сделал ее адаптивной, она показывает строку, но без заголовка.

То, как я это обошел, былоиспользовать метку данных так, например, '". $ row [" name "]."' единственная проблема, которую я имею сейчас, состоит в том, что если поле пустое, оно будет отображать заголовок, но сворачиваться в следующий заголовок.

Есть ли что-нибудь, чтобы предотвратить это, или мне нужно будет заполнить базу данных с помощью «Нет» в пустых полях, а затем запросить «да» и «нет» для отображения?

Любая помощь будет признательна.