Come posso forzare due elementi di rimanere sempre sulla stessa linea in un <td>

Question

Il codice è piuttosto semplice:

<table id="tabel_user" style="width: 100%; border: 0; background-color: white;" cellpadding="0" cellspacing="0"> 
<tr> 
    <td style="border: 0; padding: 0; padding-left: 5px;"> 
     <label for="abcd"><input class="check_useri" id="abcd" name="abcd" type="checkbox" /> abcd </label> 
    </td> 
</tr> 
</table> 

rimangono ordinatamente sulla stessa linea a meno che il testo nell'etichetta diventa veramente lungo e la il tavolo deve essere allungato per adattarlo, quindi il testo a volte viene forzato sotto la casella di controllo. Come posso impedirgli di farlo?

Answer 1

È possibile forzare gli elementi in linea per rimanere sulla stessa linea utilizzando la proprietà CSS white-space:

<td style="white-space:nowrap;"> 
    this content will not be wrapped 
</td> 

Answer 2

Definizione di un white-space può essere uno dei modi per farlo fare, ma come un insieme di dati tabulari, il suo meglio se si fissa la dimensione massima della larghezza dell'etichetta invece

label { width: 100px; display: inline-block; } 

Answer 3

È possibile utilizzare questo: <tr valign="top"> questo renderà l'allineamento verticale in alto.

Answer 4

Questo codice funziona bene, ed è reattivo:

table { 
width:100%; 
display: inline-block; 
} 
td, th { 
max-width:100% 
}