我在一行中有两个表 - 一个在左边，第二个在右边。它可能会更多这两个表，我希望看到前两个下面的两个表。也有可能出现右表无法出现的情况。如何确保两个表或只有一个（如果没有出现），下一个表将放在下面？
这是示例代码和屏幕截图当前它的样子 - 注意我在第二个表之间放置了11个br然后看起来没问题 - 但这不是好方法，因为我不确定特定表有多少行，所以这种方法肯定不正确。看看：
<br></br>
<table border="3" cellpadding="10" cellspacing="10" align="left" style="font-size:12pt;width:30%;">
<tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Marke::</td><td width="60%" style="text-align:left;padding-left:20px;">JUSThome
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Serie::</td><td width="60%" style="text-align:left;padding-left:20px;">op
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Nummer::</td><td width="60%" style="text-align:left;padding-left:20px;">10.1018.1
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Farbe::</td><td width="60%" style="text-align:left;padding-left:20px;">Zur auswahl
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material::</td><td width="60%" style="text-align:left;padding-left:20px;">Ekoleder
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material Types::</td><td width="60%" style="text-align:left;padding-left:20px;">Soft
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material Attributes::</td><td width="60%" style="text-align:left;padding-left:20px;">Soft 1
</td>
</tr>
</table><table border="3" cellpadding="10" cellspacing="10" align="right" style="font-size:12pt;width:70%;">
<tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Hohe::</td><td width="60%" style="text-align:left;padding-left:20px;">1
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Breite::</td><td width="60%" style="text-align:left;padding-left:20px;">2
</td>
</tr>
</table>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<table border="3" cellpadding="10" cellspacing="10" align="left" style="font-size:12pt;width:30%;">
<tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Marke::</td><td width="60%" style="text-align:left;padding-left:20px;">JUSThome
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Serie::</td><td width="60%" style="text-align:left;padding-left:20px;">op Farbe: Weiss
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Nummer::</td><td width="60%" style="text-align:left;padding-left:20px;">10.1018.2
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Farbe::</td><td width="60%" style="text-align:left;padding-left:20px;">Weiss
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material::</td><td width="60%" style="text-align:left;padding-left:20px;">Ekoleder
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material Types::</td><td width="60%" style="text-align:left;padding-left:20px;">Soft
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Material Attributes::</td><td width="60%" style="text-align:left;padding-left:20px;">Soft 1
</td>
</tr>
</table><table border="3" cellpadding="10" cellspacing="10" align="right" style="font-size:12pt;width:70%;">
<tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Hohe::</td><td width="60%" style="text-align:left;padding-left:20px;">1
</td>
</tr><tr>
<td width="30%" style="vertical-align:top;text-align:left;padding-left:20px;color:white;background-color: #778899">Breite::</td><td width="60%" style="text-align:left;padding-left:20px;">2
</td>
</tr>
</table>
查看屏幕截图：
此代码是从我的代码生成的，即Visual Basic代码。但也许在您的支持下，我们可以为我的代码添加一些新属性来解决这个问题。我认为即使它的VB语言也易于阅读：
'***************************** FIRST TABLE *****************************
html.AddStyleAttribute("font-size", "12pt")
html.AddStyleAttribute(HtmlTextWriterStyle.Width, "30%")
'Border
html.AddAttribute(HtmlTextWriterAttribute.Border, "3")
html.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "10") 'spaces between inner td content
html.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "10") 'spaces between td's
html.AddAttribute(HtmlTextWriterAttribute.Align, "left")
html.RenderBeginTag(HtmlTextWriterTag.Table) '---------------------------------------------------------------- TABLE
For Each item As KeyValuePair(Of String, List(Of String)) In dictionar
Dim attribute As String = item.Key
Dim attr_values As List(Of String) = item.Value
html.RenderBeginTag(HtmlTextWriterTag.Tr) '----------------------------------------------- TR (row)
'two below statments will do that text in 1st td will be always on left in the corner
html.AddStyleAttribute("vertical-align", "top")
html.AddStyleAttribute("text-align", "left")
'space from left for text
html.AddStyleAttribute("padding-left", "20px")
'gray background color
html.AddAttribute("style", "background-color: #778899")
html.AddAttribute("width", "30%") 'wystarczy dla jednej td, dla prawej nie trzeba
html.AddStyleAttribute("color", "white")
html.RenderBeginTag(HtmlTextWriterTag.Td) '--------------------------------- TD (attribute)
html.Write(attribute & ":")
html.RenderEndTag() '--------------------------------- /TD
'space from left td
html.AddAttribute("width", "60%") 'wystarczy dla jednej td, dla prawej nie trzeba
html.AddStyleAttribute("text-align", "left")
html.AddStyleAttribute("padding-left", "20px")
html.RenderBeginTag(HtmlTextWriterTag.Td) '--------------------------------- TD (values)
For Each sentence In attr_values
html.WriteLine(sentence)
If attr_values.Count > 1 Then
html.RenderBeginTag(HtmlTextWriterTag.Br)
html.RenderEndTag()
End If
Next
html.RenderEndTag() '--------------------------------- /TD
html.RenderEndTag() '---------------------------------------------- /TR
Next
html.RenderEndTag() '---------------------------------------------------------------- /TABLE
'***************************** FIRST TABLE *****************************
'***************************** SECOND TABLE *****************************
If wymiary.Count > 0 Then
html.AddStyleAttribute("font-size", "12pt")
html.AddStyleAttribute(HtmlTextWriterStyle.Width, "70%")
'Border
html.AddAttribute(HtmlTextWriterAttribute.Border, "3")
html.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "10") 'spaces between inner td content
html.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "10") 'spaces between td's
html.AddAttribute(HtmlTextWriterAttribute.Align, "right")
html.RenderBeginTag(HtmlTextWriterTag.Table) '---------------------------------------------------------------- TABLE
For Each item As KeyValuePair(Of String, List(Of String)) In wymiary
Dim attribute As String = item.Key
Dim attr_values As List(Of String) = item.Value
html.RenderBeginTag(HtmlTextWriterTag.Tr) '----------------------------------------------- TR (row)
'two below statments will do that text in 1st td will be always on left in the corner
html.AddStyleAttribute("vertical-align", "top")
html.AddStyleAttribute("text-align", "left")
'space from left for text
html.AddStyleAttribute("padding-left", "20px")
'gray background color
html.AddAttribute("style", "background-color: #778899")
html.AddAttribute("width", "30%")
html.AddStyleAttribute("color", "white")
html.RenderBeginTag(HtmlTextWriterTag.Td) '--------------------------------- TD (attribute)
html.Write(attribute & ":")
html.RenderEndTag()
'--------------------------------- /TD
'space from left td
html.AddAttribute("width", "60%")
html.AddStyleAttribute("text-align", "left")
html.AddStyleAttribute("padding-left", "20px")
html.RenderBeginTag(HtmlTextWriterTag.Td) '--------------------------------- TD (values)
For Each sentence In attr_values
html.WriteLine(sentence)
If attr_values.Count > 1 Then
html.RenderBeginTag(HtmlTextWriterTag.Br)
html.RenderEndTag()
End If
Next
html.RenderEndTag() '--------------------------------- /TD
html.RenderEndTag() '---------------------------------------------- /TR
Next
html.RenderEndTag() '---------------------------------------------------------------- /TABLE
End If '---------------------------------------------------------------- /TABLE
'***************************** SECOND TABLE *****************************
答案 0 :(得分：0)
尝试使用CSS创建表格，它们更容易设计样式。
你可以使用float：left / right将两个表放在一起（你必须设置表的宽度）
示例：
HTML：
<div id="table-left">
<div class="table-row">
<div class="table-cell">
Table cell content
</div>
</div>
</div>
<div id="table-right">
<div class="table-row">
<div class="table-cell">
Table cell content
</div>
</div>
CSS：
#table-left {
display: table;
width: 49%; /*Change width of table if you want*/
height: auto;
float: left;
}
#table-right {
display: table;
width: 49%; /*Change width of table if you want*/
height: auto;
float: right;
}
.table-row {
display: table-row;
width: 100%;
}
.table-cell {
display: table-cell;
width: 100px; /*Change width of table cell if you want*/
}
您可以更改宽度，并在CSS中添加其他样式（如背景颜色和填充），而不是使用凌乱的HTML表格标记。您还可以通过在＆＃39; table-row＆＃39;中放置另一个table-cell div来添加更多表格单元格。格。