1

Há alguma forma de fazer colspan para metade de uma coluna?!

<table border="1">
  <tr>
    <td> ola </td>
    <td> ola </td>
    <td> ola </td>
    <td> ola </td>
   </tr>
   
   <tr>
    <td> ola </td>
    <td> ola </td>
    <td> ola </td>
   </tr>
 </table
   

Gostava que as colunas da segunda linha ficassem a cobrir a linha toda e que todas as células tenham o mesmo comprimento!!

inserir a descrição da imagem aqui

Como nesse exemplo, as 2 colunas superiores estao a cobrir a tabela toda e a separação está no meio...

2 Respostas 2

2

Você pode fazer isso com colspan e definindo um width de acordo com a quantidade de colunas dividindo por 100%. Por exemplo: 3 colunas = 33.3%, 4 colunas = 25% e por aí vai...

Exemplo de 2 linhas de 4 x 3 colunas:

<table width="100%" border="1">
   <tr>
      <td width="25%"> ola </td>
      <td width="25%" colspan="3"> ola </td>
      <td width="25%" colspan="2"> ola </td>
      <td width="25%"> ola </td>
   </tr>

   <tr>
      <td width="33.3%" colspan="2"> ola </td>
      <td width="33.3%" colspan="3"> ola </td>
      <td width="33.3%" colspan="2"> ola </td>
   </tr>
</table>

3x2:

<table width="100%" border="1">
   <tr>
      <td width="33.3%"> ola </td>
      <td width="33.3%" colspan="3"> ola </td>
      <td width="33.3%"> ola </td>
   </tr>

   <tr>
      <td width="50%" colspan="3"> ola </td>
      <td width="50%" colspan="2"> ola </td>
   </tr>
</table>

5x4:

<table width="100%" border="1">
   <tr>
      <td width="20%"> ola </td>
      <td width="20%" colspan="4"> ola </td>
      <td width="20%" colspan="3"> ola </td>
      <td width="20%" colspan="4"> ola </td>
      <td width="20%"> ola </td>
   </tr>

   <tr>
      <td width="25%" colspan="2"> ola </td>
      <td width="25%" colspan="5"> ola </td>
      <td width="25%" colspan="4"> ola </td>
      <td width="25%" colspan="2"> ola </td>
   </tr>
</table>

A lógica é meio complicada, mas se baseia nos valores dos colspan somados e no número de colunas. Veja que na linha onde possui mais colunas, eu não especifico colspan na primeira e última, apenas nas do meio. A soma dos colspan + número de colunas sem colspan de cada linha devem ser iguais. No primeiro exemplo, veja que somando o valor de colspan="3" na primeira linha + 2 colunas sem colspan, dá 5. Na segunda linha também dá 5 somando os valores do colspan. Esses números sobem à medida que vai se adicionando mais colunas.

Veja um outro exemplo com 5x3:

<table width="100%" border="1">
   <tr>
      <td width="20%"> ola </td>
      <td width="20%" colspan="4"> ola </td>
      <td width="20%" colspan="3"> ola </td>
      <td width="20%" colspan="4"> ola </td>
      <td width="20%"> ola </td>
   </tr>

   <tr>
      <td width="33.3%" colspan="3"> ola </td>
      <td width="33.3%" colspan="7"> ola </td>
      <td width="33.3%" colspan="3"> ola </td>
   </tr>
</table>

Veja que a lógica segue a mesma: somando os valores da primeira linha, 1+4+3+4+1 = 13. Na segunda linha também: 3+7+3 = 13.

1
  • era exactamente isso que eu pretendia, muito obrigado pela resposta, entendi perfeitamente
    – Paul Bob
    Commented 2/01/2018 às 2:59
0

Só usar colspan = numero total de colunas

<table border="1">
  <tr>
    <td> ola </td>
    <td> ola </td>
    <td> ola </td>
    <td> ola </td>
   </tr>
   
   <tr>
    <td colspan="4"> ola </td>
   </tr>
 </table

6
  • eu quero 4 elementos na primeira linha e 3 na segunda
    – Paul Bob
    Commented 30/12/2017 às 16:10
  • editei a minha pergunta, talvez seja mais facil entender o que pretendo com a imagem
    – Paul Bob
    Commented 30/12/2017 às 16:13
  • @Droopy na figura vejo 2 células na primeira, uma linha branca estreita no meio e uma linha com 3 células
    – user60252
    Commented 30/12/2017 às 17:08
  • exato, a linha branca não interessa, eu quero obter esse resultado quando uso 2 celulas numa linha e 3 noutra
    – Paul Bob
    Commented 30/12/2017 às 17:26
  • por exemplo se eu meter 2 celulas numa linha e 3 noutra linha a linha que tem as 2 celulas vai ficar com um espaço vazio
    – Paul Bob
    Commented 30/12/2017 às 17:38

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 .