Попытка отобразить две таблицы рядом, но использование Display: inline-table или float: left, похоже, не работает. Предложения? - PullRequest
Новая
       14

Попытка отобразить две таблицы рядом, но использование Display: inline-table или float: left, похоже, не работает. Предложения?

0 голосов
/ 29 мая 2020

Обзор:

Я пытаюсь выровнять 2 таблицы бок о бок. В другом потоке я узнал, что это можно сделать, используя 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>

Я подозреваю, что это как-то связано с множеством элементов td width и других элементов html, которые я ввел в таблицу. Я все еще новичок, поэтому любые предложения по очистке кода приветствуются.

1 Ответ

0 голосов
/ 29 мая 2020

У вас установлена ​​ширина таблиц на 100%, поэтому каждая из них занимает всю ширину браузера и не может поместиться рядом. Уменьшите это значение до 50%, и вы увидите, что это работает.

Примечание: <font>, valign и bgcolor устарели уже много лет. Не используйте их.

...