Domanda Come posso spostare due tavoli uno accanto all'altro da sinistra a destra?


Se avessi due tavoli?

<table class="one"> and... <table class="two">

E il CSS assomiglia a:

table.one {
    position: relative;
    float: left;
}
table.two {
    position: relative;
    float: right;
}

Non funziona...


11
2018-04-23 04:06


origine


risposte:


Non usare la posizione: relativa, basta fornire la larghezza per ogni tabella in modo da farla galleggiare correttamente.

table.one {
    float:left;
    width:45%;
}

table.two   {
    width:45%;
    float:right;
}​

18
2018-04-23 04:11



Puoi semplicemente definire float: left al tuo corso di classe verrà automaticamente uno accanto all'altro:

table {
    float:left;
    background:yellow;
    margin-left:10px;
}
<table>
    <tr>
        <td>Table 1</td>
    </tr>
    <tr>
        <td>blah blah</td>
        <td>blah blah</td>
        <td>blah blah</td>
    </tr>

</table>

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


3
2018-04-23 05:02



Prova a dare loro una larghezza pure. Il 40% dovrebbe essere un buon test.


2
2018-04-23 04:10



Cosa vuoi dire che non funziona?

Il CSS che avrai metterà una tabella su ciascun lato dell'elemento genitore. Se stai cercando di farli galleggiare direttamente l'uno contro l'altro piuttosto che sui lati opposti del genitore, vorrai 'float: left;' in entrambi (o, al contrario, "float: right;" in entrambi).


0
2018-04-23 04:15



Ehi, funzionando ti do la demo dal vivo ora controlla questo

e ora puoi fare la seconda cosa come questa

Opzione uno

table.one {
  position:relative;
  float:left;
  border:solid 1px green;
}

table.two {
  position:relative;
  float:right;
  border:solid 1px red;
}
<table class="one">
  <tr>
    <td>hello demo here</td>
  </tr>
</table>

<table class="two">
  <tr>
    <td>hello demo here 2</td>
  </tr>
</table>


Opzione due 

<table class="one" align="left" border="1">
  <tr>
    <td>hello demo here</td>
  </tr>
</table>

<table class="two" align="right" border="1">
  <tr>
    <td>hello demo here 2</td>
  </tr>
</table>


0
2018-04-23 04:53