HTML prevenir salto de línea (entre dos etiquetas de tabla)

he siguiente código:HTML prevenir salto de línea (entre dos etiquetas de tabla)

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

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

Muy lamentablemente, se inserta un salto de línea entre estas dos tablas. He intentado ponerlos a ambos en un solo tramo y configurar los espacios en blanco para enviarlos ahora, pero fue en vano. Por favor, podría decirme cómo puedo simplemente poner estos elementos en una sola fila, sin configurar el atributo float en CSS y sin rodear cada tabla con un <td> {table} </td> y luego poner esto en una fila de la tabla.

Gracias mucho por adelantado. He pedido a Google, pero simplemente no diría nada ^^ Stackoverflow permaneció en silencio hasta ahora, también

Fuente

2010-06-03 arik

¡Lo encontré!

Uno tiene que utilizar las siguientes opciones para las dos tablas:

display: inline-table;

Gracias por la línea, chicos, muchas gracias, pero por lo menos, inline-table obras ^^

Esperanza ayudé ...

Fuente

2010-06-03 20:35:23 arik

¡Impresionante, también funcionó para mí! +1 –

¿Alguien notó esa pantalla: inline-table mantiene la tabla en un grupo? No se divide en varias páginas. – vsingh

-1

probar este CSS:

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

o se puede cortar en la parte superior-margen negativo

table{ 
    margin-top:-20px; 
}

Fuente

2010-06-03 20:18:19 Sarfraz

¿Qué sucede si flotas la tabla 1 a la izquierda y la tabla a la derecha? Por defecto, las tablas son elementos de "bloque", por lo que podría intentar mostrar: en línea.

Fuente

2010-06-03 20:20:57

Haciendo cosas se alinean: flotar hacia el mismo lado, no de izquierda a derecha. A menudo hará que todo lo demás sea mucho más difícil de acertar. –

o esto:

<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>

Fuente

2010-06-03 20:21:04 MUG4N

table{display:inline;} no funcionó?

Fuente

2010-06-03 20:24:37 edl

no. No funciona. Aunque está en una línea, los bordes de la tabla están reduciendo su contenido. Está totalmente equivocado :( – arik

Puedo ver su css? – edl

Actualización: Esta respuesta es muy antigua, y existen nuevas y mejores técnicas en la actualidad.

contenido original:

usted debe utilizar CSS para esto, ya que es un tema de presentación. ¿Por qué no puedes usar CSS?

Así es como lo haría. Simple, funciona en todos los navegadores y se adapta fácilmente a los elementos de diseño. Dale a ambas tablas un ancho que las ajuste en el elemento que las contiene, y colocalas a la izquierda. Por ejemplo:

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

#container { width: 500px; } 
table { width: 250px; float: left; }

Fuente

2010-06-03 20:25:17

Puedo usar CSS. Simplemente no quería hacer que una tabla flote a la izquierda y la otra flote a la derecha, pero su solución parece interesante. Lo intentaré ahora. Gracias^ – arik

Sí, ya veo. Como dije en un comentario anterior, flotar de izquierda a derecha a menudo complica las cosas, y hace que el diseño sea muy poco adaptable al contenido del entorno. Flotar cosas al mismo lado es mejor. –

'flotar' en En general, se abre una lata de gusanos que puede ser difícil de tratar. Los elementos flotantes tienden a necesitar cortes en los hacks para evitar que rompan otras partes del diseño. 'display: inline-block' (o' inline-table' como en respuesta aceptada) es * mucho * más fácil trabajar con. – Adrian

<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<table style="display:inline"> 
 
    <tr> 
 
     <td>Table 1</td> 
 
    </tr> 
 
</table> 
 

 
<table style="display:inline"> 
 
    <tr> 
 
     <td>Table 2</td> 
 
    </tr> 
 
</table> 
 

 
</body> 
 
</html>

<title>Page Title</title> 
</head> 
<body> 

<table style="display:inline"> 
    <tr> 
     <td>Table 1</td> 
    </tr> 
</table> 

<table style="display:inline"> 
    <tr> 
     <td>Table 2</td> 
    </tr> 
</table> 

</body> 
</html>

Fuente

2017-06-07 08:57:51

Puede explicar su código un poco en lugar de solo pegarlo. – EluciusFTW

Mostrando prácticamente es una buena señal, supongo ... !! –

De acuerdo con el cuadro de CSS modelo:

valores de los márgenes no se aplican a las filas de tabla y celdas de tablas Véase: http://www.w3.org/TR/CSS2/box.html#margin-properties

valores de relleno y de frontera no se aplican a filas de la tabla, pero son aplicables a celdas de la tabla Ver: http://www.w3.org/TR/CSS2/box.html#padding-properties

Una solución rápida es agregar relleno a la parte superior de la tabla que desea separar.

Por ejemplo: 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; 
    }

Fuente

2017-10-26 11:24:24 Baach

HTML prevenir salto de línea (entre dos etiquetas de tabla)

Respuesta

Cuestiones relacionadas