HTML e CSS para tabela

Detalhes da questão

Endereço do fórum: http://goldofolympus.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Oi, estou com dificuldade em montar a seguinte tabela:


Porém, gostaria que quando o mouse passasse em cima dos retângulos, a pontuação subisse em efeito hover para o centro do retângulo onde o mouse estiver e a imagem do retângulo fique desfocada xD Alguém que entenda de html e css pode me ajudar, por favor?

Olá,

Eu não entendi muito bem o que a senhora deseja..
Poderia ser mais específica?

Gostaria de ajuda para criar esse table como especifiquei acima

Olá,

CSS:

Código:

table.my-table {
  border: solid 3px #000;
}

.my-table td {
  border-right: solid 3px #000;
  padding: 10px;
}

.my-table td:last-child {
  border-right: 0px!important;
}

Insira este CSS em sua Folha de Estilo.

A tabela:

Código:

[table class="my-table"][tr]
[td] TEXTO COLUNA 1 [/td]
[td] TEXTO COLUNA 2 [/td]
[td] TEXTO COLUNA 3 [/td]
[td] TEXTO COLUNA 4 [/td]
[td] TEXTO COLUNA 5 [/td]
[td] TEXTO COLUNA 6 [/td]
[/tr]
[/table]

Não tem como deixar a segunda parte com html? ><

No caso do BBCode table, é só trocar [] por <>:

Código:

[table class="my-table"][tr]
[td] TEXTO COLUNA 1 [/td]
[td] TEXTO COLUNA 2 [/td]
[td] TEXTO COLUNA 3 [/td]
[td] TEXTO COLUNA 4 [/td]
[td] TEXTO COLUNA 5 [/td]
[td] TEXTO COLUNA 6 [/td]
[/tr]
[/table]

Código:

<table class="my-table"><tr>
<td> TEXTO COLUNA 1 </td>
<td> TEXTO COLUNA 2 </td>
<td> TEXTO COLUNA 3 </td>
<td> TEXTO COLUNA 4 </td>
<td> TEXTO COLUNA 5 </td>
<td> TEXTO COLUNA 6 </td>
</tr>
</table>

Estou tentando alterar o width de cada coluna, mas não funciona D= Ajuda? E pode ajudar a colocar o efeito hover que pedi?

Código:

<table class="my-table"><tr>
<td> TEXTO COLUNA 1 </td>
<td> TEXTO COLUNA 2 </td>
<td> TEXTO COLUNA 3 </td>
<td> TEXTO COLUNA 4 </td>
<td> TEXTO COLUNA 5 </td>
<td> TEXTO COLUNA 6 </td>
</tr>
</table>

<style type="text/css">
table.my-table {
  border: solid 3px #000;
  width: 100px !important;
  height: 150px;
}
 
.my-table td {
  border-right: solid 3px #000;
  padding: 10px;
  width: 100px !important;
  height: 150px;
}
 
.my-table td:last-child {
  border-right: 0px!important;
}</style>

Olá,

Por ser uma tabela, nem sempre é possível alterar o

width

, pois muitas vezes, ela ficaria bugada, o que acaba por não permitir essa alteração. Quanto mais

<td>

você adiciona, menor será o espaço de cada um.

Quanto ao efeito

hover

, infelizmente, eu não entendi muito bem. A senhora poderia explicar melhor, por gentileza?

Como assim? Se tem como aumentar, não deveria ter como diminuir?

Na verdade, há com diminuir, basta a senhora remover as coluna (<td>'s), ou diminuir via CSS.
Em contrapartida, quanto mais coluna (<td>'s), que a senhora for adicionando, menor é o espaço entre elas, entende?

Quanto ao efeito CSS, poderia dar uma explicação diferente da que a senhora deu na primeira mensagem, pois não consegui entender muito bem o que desejas.

Coluna 1

Coluna 2

Coluna 3

Coluna 1

Coluna 2

Coluna 3

Coluna 1

Coluna 2

Coluna 3

Código:

<table style="table-layout: fixed; width: 25%; border: 1px #333 solid; text-align: center;">
   <tr>
      <td>Coluna 1</td>
      <td>Coluna 2</td>
      <td>Coluna 3</td>
   </tr>
</table>

<table style="table-layout: fixed; width: 50%; border: 1px #333 solid; text-align: center;">
   <tr>
      <td>Coluna 1</td>
      <td>Coluna 2</td>
      <td>Coluna 3</td>
   </tr>
</table>

<table style="table-layout: fixed; width: 100%; border: 1px #333 solid; text-align: center;">
   <tr>
      <td>Coluna 1</td>
      <td>Coluna 2</td>
      <td>Coluna 3</td>
   </tr>
</table>

A largura funciona normal nas tabelas. Verifique se não há outro CSS influenciando na largura.

O código do Kyo funcionou e em resposta a ele: estou testando o code no htmlinstant, agora só falta o efeito em cada uma das colunas: https://i.imgur.com/l3X4sau.png Esse é o desenho que imagino e, para quem não entendeu, antes da flecha do desenho é sem o mouse em cima, depois é com o mouse em cima... Não dá pra explicar melhor do que isso x_x

Up pra não darem como eu que abandonei, mesmo sendo o povo que parou de dar solução =x

Olá,

A senhora tem que lembrar que somos voluntários, e que não somos obrigados à manter o tópico ativo.
Quanto à sua questão:

Poderia nos fornecer o link de um tópico com tal tabela em seu fórum?

Inté. o/

Eu ainda não coloquei tabela no tópico, estou com dificuldades para criar uma, como especifiquei na descrição do tópico ^^

Tente:

Código:

<table class="minha-tabela">
  <tr>
    <td class="minha-tabela-col-1">
      <span>Pontos: 66</span>
    </td>
    <td class="minha-tabela-col-2">
      <span>Pontos: 67</span>
    </td>
    <td class="minha-tabela-col-3">
      <span>Pontos: 68</span>
    </td>
  </tr>
</table>

Código:

.minha-tabela {
  table-layout: fixed;
  width: 100%;
}

.minha-tabela td {
  position: relative;
  height: 300px;
  width: 33%;
}

.minha-tabela span {
  position: absolute;
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  text-align: center;
  font-weight: 700;
  tranform: translate(0, -50%);
  display: none;
}

.minha-tabela td:hover span {
  display: block;
}

.minha-tabela td:before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

.minha-tabela td:hover:before {
  filter: blur(10px);
}

.minha-tabela-col-1:before {
  background-image: url(https://unsplash.it/200/300/?random&1);
}

.minha-tabela-col-2:before {
  background-image: url(https://unsplash.it/200/300/?random&2);
}

.minha-tabela-col-3:before {
  background-image: url(https://unsplash.it/200/300/?random&3);
}

https://jsfiddle.net/oot1wnxb/

o/

Apliquei o code

Código:

<table class="minha-tabela">
  <tr>
    <td class="minha-tabela-col-1">
      <span>Pontos: 66</span>
    </td>
    <td class="minha-tabela-col-2">
      <span>Pontos: 67</span>
    </td>
    <td class="minha-tabela-col-3">
      <span>Pontos: 68</span>
    </td>
  </tr>
</table>

<style type="text/css">.minha-tabela {
  table-layout: fixed;
  width: 100%;
}
 
.minha-tabela td {
  position: relative;
  height: 300px;
  width: 33%;
}
 
.minha-tabela span {
  position: absolute;
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  text-align: center;
  font-weight: 700;
  tranform: translate(0, -50%);
  display: none;
}
 
.minha-tabela td:hover span {
  display: block;
}
 
.minha-tabela td:before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}
 
.minha-tabela td:hover:before {
  filter: blur(10px);
}
 
.minha-tabela-col-1:before {
  background-image: url(https://unsplash.it/200/300/?random&1);
}
 
.minha-tabela-col-2:before {
  background-image: url(https://unsplash.it/200/300/?random&2);
}
 
.minha-tabela-col-3:before {
  background-image: url(https://unsplash.it/200/300/?random&3);
}</style>

Mas não resultou x_x

Print do resultado:

A senhora poderia criar essa mensagem no seu fórum para verificarmos o que acontece? Provavelmente existe algum CSS (ou Javascript) interferindo na tabela.

Criei no flood http://goldofolympus.forumeiros.com/t55-floods-e-testes-gold-of-olympus#440

O <style> parece não funcionar diretamente no post com quebras de linha. Tente minificar o CSS quando for aplicá-lo num post:

Código:

<style>.minha-tabela{table-layout:fixed;width:100%}.minha-tabela td{position:relative;height:300px;width:33%}.minha-tabela span{left:0;right:0;position:absolute;top:50%;text-align:center;font-weight:700;tranform:translate(0,-50%);display:none}.minha-tabela td:hover span{display:block}.minha-tabela td:before{content:' ';position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-position:center center}.minha-tabela td:hover:before{filter:blur(10px)}.minha-tabela-col-1:before{background-image:url(https://unsplash.it/200/300/?random&1)}.minha-tabela-col-2:before{background-image:url(https://unsplash.it/200/300/?random&2)}.minha-tabela-col-3:before{background-image:url(https://unsplash.it/200/300/?random&3)}</style>

Quase perfeito '*-*' só preciso colocar uma transição pra ficar mais suave, ajuda? ;-;

Código:

<style>.minha-tabela{table-layout:fixed;width:100%}.minha-tabela td{position:relative;height:300px;width:33%}.minha-tabela span{left:0;right:0;position:absolute;top:50%;text-align:center;font-weight:700;tranform:translate(0,-50%);display:none}.minha-tabela td:hover span{display:block}.minha-tabela td:before{content:' ';position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-position:center center}.minha-tabela td:hover:before{filter:blur(10px)}.minha-tabela-col-1:before{background-image:url(https://unsplash.it/200/300/?random&1)}.minha-tabela-col-2:before{background-image:url(https://unsplash.it/200/300/?random&2)}.minha-tabela-col-3:before{background-image:url(https://unsplash.it/200/300/?random&3)}</style>

<table class="minha-tabela">
 <tr>
   <td class="minha-tabela-col-1">
     <span>Pontos: 66</span>
   </td>
   <td class="minha-tabela-col-2">
     <span>Pontos: 67</span>
   </td>
   <td class="minha-tabela-col-3">
     <span>Pontos: 68</span>
   </td>
 </tr>
</table>

Animação de blur tende a ser um pouco pesada, por isso nem coloquei. Mas se desejar:

Código:

<style>.minha-tabela{table-layout:fixed;width:100%}.minha-tabela td{position:relative;height:300px;width:33%}.minha-tabela span{left:0;right:0;position:absolute;top:50%;text-align:center;font-weight:700;tranform:translate(0,-50%);opacity:0;transition:.5s opacity}.minha-tabela td:hover span{opacity:1}.minha-tabela td:before{content:' ';position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-position:center center;transition:.5s filter}.minha-tabela td:hover:before{filter:blur(10px)}.minha-tabela-col-1:before{background-image:url(https://unsplash.it/200/300/?random&1)}.minha-tabela-col-2:before{background-image:url(https://unsplash.it/200/300/?random&2)}.minha-tabela-col-3:before{background-image:url(https://unsplash.it/200/300/?random&3)}</style>
 
<table class="minha-tabela">
 <tr>
  <td class="minha-tabela-col-1">
    <span>Pontos: 66</span>
  </td>
  <td class="minha-tabela-col-2">
    <span>Pontos: 67</span>
  </td>
  <td class="minha-tabela-col-3">
    <span>Pontos: 68</span>
  </td>
 </tr>
</table>

Resulta, muito obrigada, Kyo sz