我使用Flexbox，并在两者之间留有间隔，以在网站右侧和左侧表格中获得结果。直到我按下一个按钮，它都可以正常工作。我为柔韧性项目着色，以查看究竟发生了什么，但是颜色消失了，无论表格的大小如何，结果都突然出现在表格下面。
有时，当我按下按钮时，打开style.css文件后，flexbox会再次运行。表格的宽度始终是相同的，只有Name的长度可能会使它稍微拉伸一点，但它永远不会比屏幕宽，因此带有结果的flexitem必须位于表格下方。
结果也是彩色的，与不多的文本一样宽，但是当我按下按钮时，结果突然和屏幕一样宽。
我尝试过：flex-wrap: nowrap，固定宽度和高度，flex: 1 1 auto，flex: 0 1 auto，min-width，min-height，max-width，{{1 }}，max-height，display: inline-flex。
我的意思是justify-content: space-around
我找不到任何能阻止JavaScript的JavaScript代码。单击“按钮”后，该表将恢复，所以可能是问题所在吗？但是我不知道该怎么解决。
#phoneTableArticle/*telefonliste.php*/
/*header*/
#headerT {
display: flex;
}
#selectionHead {
display: flex;
justify-content: space-between;
}
#filter {
margin-left: 1em;
margin-bottom: 1em;
}
/*tabelle und anzeige*/
#phoneTableArticle {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
#boxItem1 {
background-color: lightpink;
}
#boxItem2 {
background-color: aqua;
}
#phoneTable {
margin-top: 2em;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
max-height: 500px;
overflow-y: scroll;
/*text-shadow: 2px 3px 1px red, 2px -3px 1px blue;*/
}
tbody {
max-height: 500px;
max-width: 500px;
}
#phoneTable td {
padding: .5em;
border: 1px solid black;
border-collapse: collapse;
}
#zeitBereich {
margin-top: 2em;
}
/*adminbereich.php*/
#adminLogin {
margin-left: 65%;
}
#upload {
font-size: 1em;
}
#logout {
font-size: 1em;
}
#file {
padding-bottom: 1em;
}
#passChange {
display: flex;
justify-content: space-between;
}
Right after I click the Filter button
When I change the CSS (in this case pressed space)
谢谢大家。
edit：在Firefox和Safari浏览器中确实可以正常工作。每当我单击过滤器按钮时，flexbox才会消失。而且，只有在我以任何方式实际更改style.css时，才可以恢复Flexbox。
答案 0 :(得分：0)
显然，PHP代码确实以某种方式阻止了CSS。我不知道为什么会这样，但是我排除了我留下评论的PHP代码，将其放在一个名为table.php的新文件中，然后包含了这个文件，该文件曾经是这个文件。
现在效果很好。
谢谢大家，您可以帮助我变得更好。
只是为了说明我的意思，这是代码段之前和之后。
之前：
<tbody>
<!--FÜllen der Tabelle abhängig von der Dropdown auswahl-->
<?php
$total = 0;
$gesamtDauer = 0;
if(isset($_POST['filter'])){
while($row = mysqli_fetch_assoc($result)){
if($_POST['phoneSelect'] == 'Alle' && $_POST['nameSelect'] == 'Alle Namen'){
echo "<tr>";
if($row['Typ'] == 1){
echo "<td>✔</td>";//Anruf angenommen
}
else if($row['Typ'] == 2){
echo "<td>✕</td>";//Anruf abgelehnt
}
else{
echo "<td>☏</td>";//Angerufen
}
echo "<td>".$row['Datum']."</td>";
if($row['Name'] == ''){
echo "<td> Empty </td>";
}
else{
echo "<td>".$row['Name']."</td>";
}
echo "<td>0".$row['Rufnummer']."</td>";
echo "<td>".$row['Dauer']."</td>";
echo "</tr>";
}
else if($row['Rufnummer'] == $_POST['phoneSelect']){
echo "<tr>";
if($row['Typ'] == 1){
echo "<td>✔</td>";//Anruf angenommen
}
else if($row['Typ'] == 2){
echo "<td>✕</td>";//Anruf abgelehnt
}
else{
echo "<td>☏</td>";//Angerufen
}
echo "<td>".$row['Datum']."</td>";
if($row['Name'] == ''){
echo "<td> Empty </td>";
}
else{
echo "<td>".$row['Name']."</td>";
}
echo "<td>0".$row['Rufnummer']."</td>";
echo "<td>".$row['Dauer']."</td>";
echo "</tr>";
}
else if($row['Name'] == $_POST['nameSelect']){
echo "<tr>";
if($row['Typ'] == 1){
echo "<td>✔</td>";//Anruf angenommen
}
else if($row['Typ'] == 2){
echo "<td>✕</td>";//Anruf abgelehnt
}
else{
echo "<td>☏</td>";//Angerufen
}
echo "<td>".$row['Datum']."</td>";
if($row['Name'] == ''){
echo "<td> Empty </td>";
}
else{
echo "<td>".$row['Name']."</td>";
}
echo "<td>0".$row['Rufnummer']."</td>";
echo "<td>".$row['Dauer']."</td>";
echo "</tr>";
}
$total += strtotime($row['Dauer']);
}
}
//Berechnen der Gesamtdauer beim ersten Aufruf der Webseite
$gesamtDauer = date('d',$total)*24 + date('H',$total).":".date('i', $total).":00";
if(isset($_POST['berechnen'])){
echo "<div class = 'alert alert-success'> Die Gesamtdauer beträgt : ".$gesamtDauer."</div>";
}
?>
</tbody>
之后：
<tbody>
<!--FÜllen der Tabelle abhängig von der Dropdown auswahl-->
<?php
include("table.php");
?>
</tbody>
答案 1 :(得分：0)
我建议更正所有HTML错误：
<thead>而非<theader>定义<th>元素必须在<tr>内<div>内放置<tbody> 解决这些问题应该可以彻底解决您的问题-将php代码移至单独的文件应该不会有太大改变。
提示：您可以使用w3schools HTML validator检查此类错误。