The number of html lines in the example is a bit too much, please forgive me (but at least it can be directly opened with a browser, which is still very convenient).
The reason is this. I want to arrange the two tables side by side in the same row. The first idea is to do it like the following (get two <div>s to fit the <table>, and set the width percentage of each <div>) .
<html>
<body>
<h1 id="div2" align="center" style="margin-bottom:0px;padding-bottom:0px;font-size:1.625em;">so compare</h1><br>
<div style="width:20%;hight:100%;float:left;">
<table style="border-collapse:collapse;border:1px outset black;">
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">package</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">centos7.6</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libc-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libdl-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpthread-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">pcre</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpcre.so.1.2.0</td>
</tr>
</table>
</div>
<div style="width:80%;hight:100%;float:left;">
<table style="border-collapse:collapse;border:1px outset black;">
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">package</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openEuler20.03</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libc-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libdl-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpthread-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libxcrypt</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libcrypt.so.1.1.0</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openssl-libs</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libcrypto.so.1.1.1f</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openssl-libs</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libssl.so.1.1.1f</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">pcre</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpcre.so.1.2.12</td>
</tr>
</table>
</div><br><hr>
</body>
</html>The effect is as follows:
Except that the dividing line is closer to the bottom of the table (you can put a <form> </form> outside the second <table> to solve it), there seems to be no problem.
But when I zoomed the webpage, the problem was exposed.
After zooming in, the two tables actually overlapped partially (this is not what I wanted), so I had to think of another way.
Therefore, in order to allow two <table>s to be arranged side by side in the same row (no matter what, they will not overlap), I still wrap the two <table>s in their respective <div> and set the style For style="display:inline-block".
<html>
<body>
<h1 id="div2" align="center" style="margin-bottom:0px;padding-bottom:0px;font-size:1.625em;">so compare</h1><br>
<div style="display:inline-block;margin-right:20px;float: left;">
<table style="border-collapse:collapse;border:1px outset black;">
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">package</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">centos7.6</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libc-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libdl-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpthread-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libxcrypt</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libcrypt.so.1.1.0</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openssl-libs</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libcrypto.so.1.1.1f</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openssl-libs</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libssl.so.1.1.1f</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">pcre</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpcre.so.1.2.12</td>
</tr>
</table>
</div>
<div style="display:inline-block;float: none;">
<table style="border-collapse:collapse;border:1px outset black;">
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">package</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openEuler20.03</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libc-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libdl-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpthread-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">pcre</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpcre.so.1.2.0</td>
</tr>
</table>
</div>
<br><br><hr>
</body>
</html>The above html can achieve the effect as shown in the figure:
However, the awkward problem of the goose is that the last <hr> dividing line does not run through the entire line, which is not what I want (of course I hope that the dividing line runs through the entire line and does not pass through the table).
Solution: Put another layer of <div> outside the two <div>s, and modify the style of the outermost <div> to <div style="display:inline-block">.
The final effect is as follows (you can zoom in and out, they will no longer overlap):
<html>
<body>
<h1 id="div2" align="center" style="margin-bottom:0px;padding-bottom:0px;font-size:1.625em;">so compare</h1><br>
<div style="display:inline-block">
<div style="display:inline-block;margin-right:20px;float: left;">
<table style="border-collapse:collapse;border:1px outset black;">
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">package</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">centos7.6</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libc-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libdl-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpthread-2.28.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libxcrypt</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libcrypt.so.1.1.0</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openssl-libs</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libcrypto.so.1.1.1f</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openssl-libs</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libssl.so.1.1.1f</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">pcre</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpcre.so.1.2.12</td>
</tr>
</table>
</div>
<div style="display:inline-block;float: none;">
<table style="border-collapse:collapse;border:1px outset black;">
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">package</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">openEuler20.03</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libc-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libdl-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">glibc</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpthread-2.17.so</td>
</tr>
<tr>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">pcre</td>
<td class="row" style="background-color:#eeeeee;font-weight:bold;text-align:left;font-size:0.94em;white-space:nowrap;border:1px inset gray;padding: 3px;">libpcre.so.1.2.0</td>
</tr>
</table>
</div>
</div>
<br><br><hr>
</body>
</html>