Div样式为表格输入而不是呈现


Div Styled As Table for Form Input not Rendering

我正在为一位音乐家开发一个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>";

谢谢你的帮助。最好的,克里斯。

检查你的CSS,问题就在这里:

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

display: table-column不是用来指定元素是单元格,而是用来指定元素包含一列单元格;和根据定义,它不呈现:

将'display'设置为'table-column'或'table-column-group'的元素不显示(就像设置了'display: none'一样)

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

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