HTML:内联代码块不适用于仅一张表

时间:2018-11-15 19:40:34

标签: html display ccss

我真的是html的新手,我正在尝试创建html表集,我正在使用display:inline block,它以我想要的方式工作,将一些表放在其他表的旁边...但是当我只放一张桌子时,它不会显示桌子的边框。代码如下:

        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>

其余的只是单元格上的信息

2 个答案:

答案 0 :(得分:0)

您为什么要内联?我建议在表格上使用float:right

答案 1 :(得分:0)

如果要在表格内添加边框,则必须设置td和th元素的样式:

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

或者如果您只需要添加垂直线:

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