Mostrar varios <tr> en horizontal

[insyse]

Hola a todos,

Tengo un script (http://dolar.wilkinsonpc.com.co/indi...cos-dolar.html) que me muestra unos indicadores economicos en forma de tabla, algo así:

Dolar > 2000
Euro > 3000
Cafe > 1500

El problma es que necesito que se vea así....

Dolar > 2000 | Euro > 3000 | Cafe > 1500

Alguien sabe como hacer para los <tr> Se puedan mostar en una sola linea?

[caricatos]

Hola:

Parece que el problema es de maquetación, y no es recomendable usar tablas para presentar datos... (salvo en el caso de datos tabulares).

Saludos

[insyse]

Si lo se, pero el codigo es de una pagina externa y lo muetsra asi... solo queria saber si es posible que con CSS3 se pudiera maquetar diferente para que cada <tr> se viera algo asi como inline... Aunque ya intente eso, pero no funcionó.

[ArturoGallegos]

No te dan alternativas? alguna API?


igual si no hay de otra yo lo haría con javascript/jquery solo tendrías que leer el contenido de cada celda que necesites e imprimirlo en un div u otro elemento fuera de la tabla.

[AngelKrak]

Pense que ya te habia puesto la Solución, mmm que raro .-.

Con CSS seria mas o menos asi ;)

Código CSS:

* {
  margin: 0;
  padding: 0;
}
table tr {
  border-collapse: collapse;
  border-spacing: 0;
  display: inline-flex;
}
table tr td,
table tr th {
  border: 1px solid #ddd;
  padding: 10px;
  width: 240px;
  text-align: center;
}
table tr td:not(first-child),
table tr th:not(first-child) {
  border-right: 0;
}
 
tbody {
  height: 44px;
  overflow: hidden;
  display: inline-flex;
}
 

Demo:
http://codepen.io/AngelKrak/pen/BoEZaQ