Html 表表示为未显示的div
我是网络编程新手,我正在处理的网页的第一稿是表中的表。随着阅读的深入,我发现将外部表呈现为div并将表嵌套在外部div的单元格中是一种更好的样式。然而,当我将表标记切换为div时,所有内容都停止显示。我肯定我错过了一些明显的东西。代码如下: CSS: HTML:Html 表表示为未显示的div,html,css,html-table,Html,Css,Html Table,我是网络编程新手,我正在处理的网页的第一稿是表中的表。随着阅读的深入,我发现将外部表呈现为div并将表嵌套在外部div的单元格中是一种更好的样式。然而,当我将表标记切换为div时,所有内容都停止显示。我肯定我错过了一些明显的东西。代码如下: CSS: HTML: ... ... ... 好的做法是使用无表HTML进行标记,除非您实际需要显示表格数据。表格用于表格数据。但是,在您的情况下,问题在于display:CSS属性。如果你把显示:块;布局开始出现在页面上,而不是表格单元格等。因此,我建议
...
...
...
好的做法是使用无表
HTML进行标记,除非您实际需要显示表格数据。表格用于表格数据
。但是,在您的情况下,问题在于display:
CSS属性。如果你把显示:块;布局开始出现在页面上,而不是表格单元格
等。因此,我建议您查看一下代码中唯一的错误是使用了.col的display:table column,请尝试将其删除或更改为表单元格或表行,您的代码应该可以工作。不要将div和表放在表单中!谢谢这些表格实际上是表格数据,所以我需要它们。但是它们的尺寸都不一样,所以它们没有很好地包装在外桌上。顺便说一句,将表格单元格更改为块并没有使表格重新出现。@Diodeus-这是一种看待它的方式!!:-)好吧,你是对的,这会使桌子重新出现——一切都乱七八糟。但是属性table column在VisualWebDeveloper提供的代码补全中是绝对可用的。“table column”显示类型意味着它的行为类似于HTML中的标记,即一个不可见元素,其宽度*控制封闭表中相应物理列的宽度。有关CSS表模型的更多信息,请参见。请参见此处使用不同显示类型的嵌套div示例:@AnnB。正确的是,它不显示任何内容,仅用于设置样式信息,如
所显示的内容。
.Dashboard
{
display: table;
table-layout: fixed;
height: 500px;
width: 500px;
}
.col
{
display: table-column;
}
.cell1
{
display: table-cell;
border: 1px solid black;
}
.cell2
{
display: table-cell;
border: 1px solid black;
}
.cell3
{
display: table-cell;
border: 1px solid black;
}
.cell4
{
display: table-cell;
border: 1px solid black;
}
table.inner, td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
padding: 2px;
}
td.image
{
padding: 0;
margin: 0;
}
<form id="form1" runat="server">
<asp:Label runat="server" ID="label"></asp:Label>
<div runat="server" id="Dashboard" class="Dashboard">
<div class="col">
<div class="cell1">
<table class="inner" id="t1">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr><...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</div>
<div class="cell2">
<table class="inner" id="t2">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</div>
</div>
<div class="col">
<div class="cell3">
<table class="inner" id="t3">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</div>
<div class="cell4">
<table class="inner" id="t4">
<tr>...</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>