尝试并排显示 2 tables 但使用 Display: inline-table 或 float:left 似乎不起作用。建议？

Question

概览：

我正在尝试让 2 table 并排对齐。在另一个线程中，我发现您可以使用 display:inline-table 或 float: left 来做到这一点。但是，当我将这些元素添加到 CSS 时，没有任何反应。

这是我的代码目前的样子（另外，如果我的代码混乱，请见谅）：

<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color:#FFFFFF;   
}

table {
float: left; 
font-family: tahoma, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 0px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
tr:hover {background-color:#FFDB80;}
</style>
</head>
<body>
<table cellpadding="10" cellspacing="0"  style="height: 100px; font-family:tahoma;">
<tbody>
<tr>
<td colspan="3" width="700px" valign="center" bgcolor="#192A34" style="color:white;"><font size="4">LIST OF ISBT 128 STANDARDS</font></td>
<td width="100px" valign="center" bgcolor="#192A34" style="color:white;"><font size="2"> 05 Nov 2018</font></td>
</tr>
<tr>
<td width="100px" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Identification</font></td>
<td width="600" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Document Title</font></td>
<td width="100" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Active Version</font></td>
<td valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Date Issued</font></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><font size="2">ST-001</font></td>
<td><font size="2">ISBT 128 Standard Technical Specification</font></td>
<td><font size="2">5.10.0</font></td>
<td><font size="2"> Jan 2019</font></td>
</tr>
</tbody>
</table>
<table cellpadding="10" cellspacing="0"  style="height: 100px; font-family:tahoma;">
<tbody>
<tr>
<td colspan="3" width="700px" valign="center" bgcolor="#192A34" style="color:white;"><font size="4">LIST OF ISBT 128 TECHNICAL BULLETINS</font></td>
<td width="100px" valign="center" bgcolor="#192A34" style="color:white;"><font size="2"> 05 Nov 2018</font></td>
</tr>
<tr>
<td width="100px" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Identification</font></td>
<td width="600" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Document Title</font></td>
<td width="100" valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Active Version</font></td>
<td valign="center" bgcolor="#941A1D" style="color:white;"><font size="2">Date Issued</font></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><font size="2">TB-001</font></td>
<td><font size="2">Implementing ISBT 128: Guidance on Handling non-ISBT 128 Labeled Collections</font></td>
<td><font size="2">5.10.0</font></td>
<td><font size="2"> Jan 2019</font></td>
</tr>
</tbody>
</table>
</body>
</html>

我怀疑它与我注入 table 的许多 td width 元素和其他 html 元素有关。我仍然是初学者，所以欢迎提出任何建议来清理代码。

Answer 1

您将表格的宽度设置为 100%，因此每个表格都占据了浏览器的整个宽度，无法并排放置。将其减少到 50%，您会发现效果很好。

注意：<font>、valign 和 bgcolor 已经过时多年。不要使用它们。

尝试并排显示 2 tables 但使用 Display: inline-table 或 float:left 似乎不起作用。建议？

Trying to display 2 tables side by side but using Display: inline-table or float:left doesn't seem to work. Suggestions?

html-table

css-tables