Div 样式设置为表格输入未呈现的表格

Question

我正在为一位音乐家开发一个 php 支持的网站，其中一部分涉及他通过表单将即将播放的节目添加到他的网站的能力。我想要一个表格布局，让他可以看到他即将到来的节目，并且可以选择添加一个新节目。我尝试使用表格，但很快发现它们并不真正适用于 PHP 表单。因此，我尝试将表单格式化为具有 CSS 显示属性的表格。事实上，如果你在 Chrome 中进入检查器，它根本不会渲染，它会清楚地显示所有信息，在 HTML 中布局，但没有高度。我尝试手动添加高度和宽度，但无济于事。我尝试从表单更改为 div，只是为了看看，但这也无济于事。

.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：

'display' 设置为 'table-column' 或 'table-column-group' 的元素不会被渲染（就像他们有 'display: none' 一样）

这就是为什么即使设置了height 后你也看不到内容的原因。您需要使用什么来指定div 是一个单元格，即display: table-cell。然后它将正确显示每个单元格的内容。此更改应该可以解决问题：

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