HTML empêcher de saut de ligne (entre deux balises de tableau)

J'ai code suivant:

<table>
    <tr>
        <td>Table 1</td>
    </tr>
</table>

<table>
    <tr>
        <td>Table 2</td>
    </tr>
</table>

Très malheureusement, un saut de ligne est insérée entre ces deux tables. J'ai essayé de les mettre à la fois dans une seule travée et le paramétrage de l'espace de nowrap, mais en vain. S'il vous plaît, pourriez-vous me dire comment je peux simplement mettre ces éléments en une seule ligne, sans fixer le flotteur attribut CSS et sans entourant chaque table avec un <td> {table} </td> et mettre dans une ligne de table.

Merci beaucoup à l'avance. J'ai demandé à Google, mais il ne serait pas juste de dire quoi que ce soit ^^ StackOverflow est resté silencieux jusqu'à présent, trop

OriginalL'auteur arik | 2010-06-03

  1. 19

    Je l'ai trouvé!

    On doit utiliser les paramètres suivants pour les deux tableaux:

    display: inline-table;

    Merci pour le inline, les gars, merci beaucoup, mais au moins, inline-table de travaille ^^

    Espère que j'ai aidé...

    Génial, a fonctionné pour moi aussi! +1
    Personne n'a remarqué que display: inline-table de garde de la table dans un groupe ? Il n'est pas divisé entre plusieurs pages.

    OriginalL'auteur arik

  2. 1

    Selon la modèle de boîte CSS :

    marge valeurs ne s'appliquent pas aux lignes de la table et les cellules du tableau, Voir:
    http://www.w3.org/TR/CSS2/box.html#margin-properties

    rembourrage et les valeurs limites ne s'appliquent pas aux lignes de la table, mais s'appliquent à
    les cellules du tableau, Voir: http://www.w3.org/TR/CSS2/box.html#padding-properties

    Une solution rapide consiste à ajouter un rembourrage pour le haut du tableau que vous souhaitez séparer.

    Par exemple: https://codepen.io/Gh-_-st/pen/oGKOQL

       <table cellpadding="0" cellspacing="0" border="0">
    <tr class="row1">
        <td>Row One - 1</td>
        <td>Row One - 2</td>
    </tr>
    <tr class="row2">
        <td>Row Two - 1</td>
        <td>Row Two - 2</td>
    </tr>    
   </table>
   <table cellpadding="0" cellspacing="0" border="0" class="table-2">
        <tr class="row1">
            <td>Row One - 1</td>
            <td>Row One - 2</td>
        </tr>
        <tr class="row2">
            <td>Row Two - 1</td>
            <td>Row Two - 2</td>
        </tr>    
   </table>

    CSS:

         td {
       border: 1px dotted blue;
     }

     .table-2 {
      padding-top: 40px;
    }

    td {
      padding : 20px;
    }

    OriginalL'auteur Baach

  3. 0

    Que si vous flotter au tableau 1 de la gauche et de la table à droite? Par défaut, les tables sont "bloc" éléments, de sorte que vous pouvez essayer display:inline.

    Faire les choses de la ligne: Flotter sur le même côté, de ne pas gauche-droite. Il sera souvent seulement de faire tout le reste autour de beaucoup plus fort pour obtenir le droit.

    OriginalL'auteur Ken Ray

  4. 0

    ou ceci:

    <table border=1 style="position:absolute;width:100;height:30;left:0;top:100"> 
<tr> 
<td>aaaaa</td> 
</tr> 
</table> 
<table border=1 style="position:absolute;width:100;height:30;left:100;top:100"> 
<tr> 
<td>bbbbb</td> 
</tr> 
</table>

    OriginalL'auteur MUG4N

  5. 0

    table{display:inline;} ne fonctionne pas?

    nope. ne fonctionne pas. Même si c'est dans une ligne, les bordures de la table de la coupe de son contenu. C'est totalement faux 🙁
    Puis-je voir votre css?

    OriginalL'auteur edl

  6. 0

    Mise à jour: Cette réponse est très ancienne et nouvelle, de meilleures techniques existent aujourd'hui.

    Contenu Original:

    Vous devriez utiliser CSS pour cela, car c'est une question de présentation. Pourquoi ne pouvez-vous pas utiliser les CSS?

    C'est comment je le ferais. Simple, fonctionne dans tous les navigateurs et il s'adapte facilement à surrouding éléments de mise en page. Donner les deux tables une largeur qui correspond à l'élément contenant, et flottent à la fois d'entre eux à gauche. Par exemple:

    <div id="container">
  <table>...</table>
  <table>...</table>
</div>

#container { width: 500px; } 
table { width: 250px; float: left; }
    Je peux utiliser les CSS. Je n'ai tout simplement pas envie de faire un tableau de float à gauche et le otehr un flotteur droit, mais ta solution me semble intéressante. Je vais essayer maintenant. Merci ^
    Yep, je vois. Comme je l'ai dit dans un commentaire précédent, flottante gauche-droite complique souvent les choses autour de, et fait la mise en page très peu adaptable aux environs de contenu. Flottant choses du même côté, c'est mieux.
    float en général ouvre une boîte de pandore qui peut être difficile à traiter. Les éléments flottants ont tendance à nécessiter des hacks sur des hacks pour les empêcher de briser d'autres parties de la disposition. display: inline-block (ou inline-table comme dans acceptées réponse) est bien plus facile de travailler avec.
    Ajout d'une mise à jour du post. Flottant était en effet le moyen d'y aller une fois. 🙂

    OriginalL'auteur Arve Systad

  7. -1

    Essayer ce css:

    table {
  padding:0px;
  margin:0px;
}

    Ou vous pouvez pirater négatif de haut en marge

    table{
  margin-top:-20px;
}

    OriginalL'auteur Sarfraz