Bonjour,
j'ai deux tableaux et j'aimerais les mettre sur une même ligne. Mais rien à faire, ils sont l'un au dessus de l'autre. Quelqu'un aurait-il une idée svp ? Voici mon code

CSS

body { color: #2E2E2E; }
body{
font-size: 18px;
}
.tableaux{
  display:inline-block;
  vertical-align:top;
}

HTML

<div style="overflow-x: auto;">
<table style="table-layout: fixed;" class="tableaux">
<tbody>
<tr style="height: 105px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Plateforme</b></td>
</tr>
<tr style="height: 74px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Nombre de coins minables</b></td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Moyens de paiements acceptés</b></td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Date de création*</b></td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Langue française ?</b></td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Pays d'origine</b></td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Nombre d'utilisateurs</b></td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Note*</b></td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"><b>Site web</b></td>
</tr>
</tbody>
</table>
</div>
<div style="overflow-x: auto;">
<table style="table-layout: fixed;" class="tableaux">
<tbody>
<tr style="height: 105px;">
<td style="width: 150px; height: 105px; text-align: center;"><a href="https://www.genesis-mining.com/a/65911" target="_blank" rel="noopener"><img src="https://acheterdescryptomonnaies.fr/wp-content/uploads/2018/12/Miner-cryptomonnaies-chez-Genesis-mining.png" /></a></td>
<td style="width: 150px; height: 105px; text-align: center;"><a href="https://hashflare.io/r/BE91C45E" target="_blank" rel="noopener"><img src="https://acheterdescryptomonnaies.fr/wp-content/uploads/2018/12/Miner-cryptomonnaies-chez-Hashflare.png" /></a></td>
<td style="width: 150px; height: 105px; text-align: center;"><a href="https://www.eobot.com/new.aspx?referid=153638" target="_blank" rel="noopener"><img src="https://acheterdescryptomonnaies.fr/wp-content/uploads/2018/12/Miner-cryptomonnaies-chez-Eobot.png" /></a></td>
<td style="width: 150px; height: 105px; text-align: center;"><a href="https://www.nicehash.com/?refby=1168376" target="_blank" rel="noopener"><img src="https://acheterdescryptomonnaies.fr/wp-content/uploads/2018/12/Miner-cryptomonnaies-chez-Nicehash.png" /></a></td>
</tr>
<tr style="height: 74px;">
<td style="width: 150px; height: 74px; text-align: center;">6</td>
<td style="width: 150px; height: 74px; text-align: center;">5</td>
<td style="width: 150px; height: 74px; text-align: center;">21</td>
<td style="width: 150px; height: 74px; text-align: center;">TOUS</td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;">CB, Cryptos</td>
<td style="width: 150px; height: 38px; text-align: center;">CB, BTC</td>
<td style="width: 150px; height: 38px; text-align: center;">Cryptos, Epay</td>
<td style="width: 150px; height: 38px; text-align: center;">BTC</td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;">2014</td>
<td style="width: 150px; height: 38px; text-align: center;">2015s</td>
<td style="width: 150px; height: 38px; text-align: center;">2013s</td>
<td style="width: 150px; height: 38px; text-align: center;">2014</td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"></td>
<td style="width: 150px; height: 38px; text-align: center;"></td>
<td style="width: 150px; height: 38px; text-align: center;"></td>
<td style="width: 150px; height: 38px; text-align: center;"></td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;">Hong-Kong</td>
<td style="width: 150px; height: 38px; text-align: center;">Royaume-uni</td>
<td style="width: 150px; height: 38px; text-align: center;">Etats-unis</td>
<td style="width: 150px; height: 38px; text-align: center;">Slovénie</td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;">?</td>
<td style="width: 150px; height: 38px; text-align: center;">1 million</td>
<td style="width: 150px; height: 38px; text-align: center;">2,1 millions</td>
<td style="width: 150px; height: 38px; text-align: center;">1,5 million</td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;">4,5/5</td>
<td style="width: 150px; height: 38px; text-align: center;">4/5</td>
<td style="width: 150px; height: 38px; text-align: center;">4/5</td>
<td style="width: 150px; height: 38px; text-align: center;">5/5</td>
</tr>
<tr style="height: 38px;">
<td style="width: 150px; height: 38px; text-align: center;"><a href="https://www.genesis-mining.com/a/65911" target="_blank" rel="noopener"><b>Visitez le site</b></a></td>
<td style="width: 150px; height: 38px; text-align: center;"><a href="https://hashflare.io/r/BE91C45E" target="_blank" rel="noopener"><b>Visitez le site</b></a></td>
<td style="width: 150px; height: 38px; text-align: center;"><a href="https://www.eobot.com/new.aspx?referid=153638" target="_blank" rel="noopener"><b>Visitez le site</b></a></td>
<td style="width: 150px; height: 38px; text-align: center;"><a href="https://www.nicehash.com/?refby=1168376" target="_blank" rel="noopener"><b>Visitez le site</b></a></td>
</tr>
</tbody>
</table>
</div>

Merci

-
Edité par achatcrypto 14 décembre 2018 à 13:39:03

salut,

perso, déjà, je te conseille de séparer HTML et CSS.

Tu gagneras en lisibilité et si besoin de faire une modif de style :

Tu modifies dans un seul endroit (au lieu de ligne par ligne), tu recharges et c'est fini.

Sinon, pour ton souci tu pourrais partir là-dessus (et en profiter pour virer tous les text-align des <td>) :

.tableaux{
  width:48%; /* Largeur max pour afficher les 2 côte à côte
  position:relative;
  float:left;
  margin:1%;
  background:#FFF;
  text-align:center;
}

edit : j'avais zappé : dans ce cas, tu peux virer ce qu'on voit ici L33 et L34 car ça ne sert à rien.

-
Edité par rga 14 décembre 2018 à 14:07:31

Bonjour achatcrypto,

Enlèves les div parent du tableau et mets dans  la class display:inline-table

Si tu veux garder les div parent  :

https://codepen.io/Zonecss/pen/jQjmbv