HTML: Inline block doesn't work for just one table

Question

I'm REALLY new to html, and I'm trying to create a html set of tables, I am using display : inline block and it works the way I want, to put some tables next to the others... but when I put just one table it doesnt shows the borders of the table. The code is the following:

        table {
               border: 1px solid black;
               border-collapse:collapse;
               display: inline-block;
              }
        h2.headertekst {
               text-align: center;
               color : white;
               font-family: verdana
               }

<!DOCTYPE html>
<html>
<head>
<body bgcolor="#3377ff">
<h2 class = "headertekst">Mis Pokemons Favoritos</h2>
<table bgcolor="#e52b50">
<tr>
<th rowspan="4">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png">
</th>
<td style="color: white">Nombre: Bulbasaur</td>
</tr>
<tr>
<td style="color: white">Peso: 69</td>
</tr>
<tr>
<td style="color: white">Altura: 10</td>
</tr>  
<tr>
<td style="color: white">Expreriencia Base: 64</td>
</tr>   
</table>
</body>
</html>

and the rest is just the information on the cells

share complete code, i think some of code is missing – Naga Sai A Nov 15 '18 at 19:44 — Naga Sai A, Nov 15 '18 at 19:44
Please post your full code so we can see the issue. – Peter Nov 15 '18 at 19:44 — Peter, Nov 15 '18 at 19:44
Just did, thank you guys – Mauricio Sanabria Quesada Nov 15 '18 at 20:05 — Mauricio Sanabria Quesada, Nov 15 '18 at 20:05

score 0 · Answer 1 · answered Nov 15 '18 at 19:45

0

Why are you trying to do it inline? I would suggest using float:right on the tables

answered Nov 15 '18 at 19:45

glennox

1

Because I will add a lot more of tables, so I need them to be ordered. It seems like float:right puts the table on the right part of the page – Mauricio Sanabria Quesada Nov 15 '18 at 20:01

score 0 · Answer 2 · answered Nov 15 '18 at 20:25

0

If you want to add borders inside your tables you have to style td and th elements:

table td, table th {
  border: 1px solid black;
}

Or if you need to add only vertical line:

table td, table th { border-left:1px solid black; }

answered Nov 15 '18 at 20:25

Arturs Mednis

368
1
3
12

HTML: Inline block doesn't work for just one table

2 Answers2