Div風格爲表格輸入不呈現

Question

我正在爲音樂家提供php支持的網站，其中一部分涉及他能夠通過表單添加即將到來的節目到他的網站。我想要一個表格佈局，他可以看到他即將到來的演出，並可以選擇添加一個新的演出。我嘗試過使用表格，但很快發現它們並不適用於PHP表單。所以我試圖將我的表單格式化爲具有CSS顯示屬性的表格。事實上，如果你在Chrome瀏覽器中進行檢查，那麼它顯示的所有信息都清晰可見，並在HTML中顯示，但沒有高度。我嘗試手動添加高度和寬度，但無濟於事。我試圖從一種形式轉變爲一種形式，只是爲了看，而這也沒有幫助。

.form-table { 
 
    width: 100%; 
 
    display: table; 
 
    font-size: 20px; 
 
} 
 
.admin-table-row { 
 
    display: table-row; 
 
    width: 100%; 
 
} 
 
.admin-table-cell { 
 
    display: table-column; 
 
} 
 
.admin-venue { 
 
    width: auto; 
 
    text-align: left; 
 
} 
 
.admin-age { 
 
    text-align: right; 
 
    width: 75px; 
 
} 
 
.admin-date { 
 
    text-align: right; 
 
    width: 200px; 
 
} 
 
.admin-time { 
 
    text-align: right; 
 
    width: 100px; 
 
} 
 
.admin-time { 
 
    text-align: right; 
 
    width: 100px; 
 
} 
 
.admin-edit { 
 
    text-align: right; 
 
    width: 100px; 
 
} 
 
.admin-delete { 
 
    text-align: right; 
 
    width: 100px; 
 
}

//echo "<form class='form-table' action='' method='post'>"; 
 
echo "<div class='form-table'>"; 
 
foreach($stmt as $upcomingShow) 
 
{ 
 
    $date = date("j F, Y", (strtotime($upcomingShow['date']))); 
 
    $time = date("g:i a", (strtotime($upcomingShow['time']))); 
 

 
    echo "<div class='admin-table-row'>"; 
 
     if(!empty($upcomingShow['link'])) 
 
     { 
 
      echo "<div class='admin-venue admin-table-cell'><a href='" . $upcomingShow['link'] . "' style='text-decoration: none;'>" . $upcomingShow['venue'] . "</a></div>"; 
 
     } 
 
     else 
 
     { 
 
      echo "<div class='admin-venue admin-table-cell'>" . $upcomingShow['venue'] . "</div>"; 
 
     } 
 
     echo "<div class='admin-age admin-table-cell'>" . $upcomingShow['age'] . "</div>"; 
 
     echo "<div class='admin-date admin-table-cell'>" . $date . "</div>"; 
 
     echo "<div class='admin-time admin-table-cell'>" . $time . "</div>"; 
 
     echo "<div class='admin-edit admin-table-cell'><input name='edit' id='edit' type='submit' value=' Edit ' style='background: none; border: none; padding: 0; font: inherit; cursor: pointer;'></div>"; 
 
     echo "<div class='admin-delete admin-table-cell'><input name='delete' id='delete' type='submit' value=' Delete ' style='background: none; border: none; padding: 0; font: inherit; cursor: pointer;'></div>"; 
 
     echo "<input name='show-id' id='show-id' type='hidden' value='" . $upcomingShow['id'] . "'>"; 
 
    echo "</div>"; 
 
} 
 
echo "</div>"; 
 
//echo "</form>";

感謝所有幫助。最好，克里斯。

Answer 1

檢查你的CSS，這個問題在這裏：

.admin-table-cell { 
    display: table-column; 
} 

的display: table-column不用於指定該元素是一個小區，但指定的元素包含一列單元格;和by definition it is not rendered：

元素設置爲「表列」或「表列組」不會呈現「顯示器」（就好像他們有「顯示：無」）

這就是爲什麼即使設置了height也沒有看到內容。你需要用什麼來指定div是一個單元格，是display: table-cell。然後它會正確顯示每個單元格的內容。這個改變應該解決問題：

.admin-table-cell { 
    display: table-cell; 
}