1

Boas, eu tenho uma duvida, numa tabela tenho 2 tr um com 4 td's e outra com 3 Seria possível transformar isto: tabela com diferentes células mas não centradas na tabela.

numa tabela assim:inserir a descrição da imagem aqui mas sem ser preciso criar 2 tabelas

ou seja, ter diferentes numeros de celulas em 2 linhas, mas centrar as celulas.

eis o codigo da primeira imagem:

<table class="bordaredonda">
    <tr>
        <td><img class="ex1" src="icon/Neutros/CaveSpiderFAce.png" ALT="Aranha das Cavernas"></td>
        <td><img class="ex1" src="icon/Neutros/Endermanface.png" ALT="Enderman"></td>
        <td><img class="ex1" src="icon/Neutros/PolarBearFace.png" ALT="Urso Polar"></td>
        <td><img class="ex1" src="icon/Neutros/Snowgolemhead.png" ALT="Golem de Neve"></td>
    </tr>
    <tr>
        <td><img class="ex1" src="icon/Neutros/Spiderface.png" ALT="Aranha"></td>
        <td><img class="ex1" src="icon/Neutros/Vg_face.png" ALT="Golem de Ferro"></td>
        <td><img class="ex1" src="icon/Neutros/Zombiepigmanface.png" ALT="Zombie Pigman"></td>
    </tr>
</table>

Obrigado pela atenção

1
  • 1
    Tem que ser usando <table>? Ou pode ser usando uma estrutura diferente? Commented 16/02/2017 às 11:19

4 Respostas 4

0

Olha, com tabela eu realmente não posso te ajudar, mas vê se assim te serve.

img {
	width: 50px;
}
.row {
	width: 100%;
	text-align: center;
}
.row div {
	display: inline-block;
	min-width: 100px;
}
<div class="row">
	<div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Aranha das Cavernas"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Enderman"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Urso Polar"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Golem de Neve"></div>
	<div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Golem de Neve"></div>
</div>

<div class="row">
	<div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Aranha das Cavernas"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Enderman"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Urso Polar"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" ALT="Golem de Neve"></div>
</div>

0

INLINE-BLOCK

Aproveitando-se da propriedade inline-block acredito que você vai alcançar o resultado desejado (note que essa solução não se aplica a tabelas):

.linha {
   height:106px;
   text-align: left;
}

.coluna {
   display: inline-block;
   float: left;
   border: 1px solid #444;
   background: #C34;
   width: 20%;
   height:106px;
   box-sizing: border-box;
}
<div class="linha">
   <div class="coluna"></div>
   <div class="coluna"></div>
   <div class="coluna"></div>
   <div class="coluna"></div>
   <div class="coluna"></div>
</div>

<div class="linha">
   <div class="coluna"></div>
   <div class="coluna"></div>
   <div class="coluna"></div>
</div>

0

Vê se dessa forma se adapta visualmente ao que você quer:

<table>
    <tr>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
    </tr>
    <tr>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
    </tr>
</table>
0

Talvez com <table> não seja possível fazer isso.

Tente utilizar flexbox.

Exemplo:

.caixa {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-around;
}
.item {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  text-align: center;
}
<div class="caixa">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Com o flexbox você tem mais dinamismo com seus itens e independente da quantidade, eles sempre vão estar alinhados.

Apenas tome cuidado, essa especificação varia de acordo com a versão de cada navegador:

  • A nomenclatura atual é display: flex;
  • Para navegadores antigos deve-se usar display: flexbox;
  • E para os mais antigos ainda, usa-se display: box;

Aqui tem um guia mais completo com todas as informação sobre o flexbox. Dá uma conferida.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .