cols, colgroups e css: classe pseudo pairar
-
21-08-2019 - |
Pergunta
Eu estou tentando criar uma tabela para exibir o IMC do indivíduo.
Como parte deste, eu gostaria, em: hover, para o <tr>
e <col>
(ou <colgroup>
) a ser destacado também, para que o cruzamento para ser mais aparente
Como a tabela vai apresentar medidas métricas e imperiais, a: hover não tem que parar na pilha (de qualquer direção) e que, na verdade, ser um bônus se estendeu de um eixo para o outro. Eu também estou usando o doctype Strict XHTML 1.1, se isso faz a diferença?
Então ... um exemplo (da tabela real ... maior), mas isso deve ser representativa:
<script>
tr:hover {background-color: #ffa; }
colgroup:hover,
col:hover {background-color: #ffa; }
</script>
...
<table>
<col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
</tr>
<tr>
<td>160cm</td>
<td>20</td>
<td>21</td>
<td>23</td>
</tr>
<tr>
<td>165cm</td>
<td>18</td>
<td>20</td>
<td>22</td>
</tr>
<tr>
<td>170cm</td>
<td>17</td>
<td>19</td>
<td>21</td>
</tr>
</table>
Am I pedir o impossível, que eu preciso para ir JQuery-alas?
Solução
Aqui está um método CSS puro utilizando sem Javascript.
Eu costumava pseudo-elementos ::before
e ::after
para fazer a linha e coluna realce. z-index
mantém o destaque abaixo do <tds>
no caso de você precisa para lidar com eventos de clique. position: absolute
lhes permite sair dos limites da <td>
. overflow: hidden
nas peles <table>
o transbordamento destaque.
Não era necessário, mas eu também tornou selecionar apenas a linha ou coluna quando você está nos cabeçalhos. As classes .row
e .col
cuidar do presente. Se você deseja que o simplifique, você pode removê-los.
Isso funciona em todos os navegadores modernos (e degrada graciosamente em navegadores mais antigos por não fazer nada).
Demonstração: http://jsfiddle.net/ThinkingStiff/rUhCa/
Output:
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .row, .col {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::before,
.row:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
HTML:
<table>
<tr>
<th></th>
<th class="col">50kg</th>
<th class="col">55kg</th>
<th class="col">60kg</th>
<th class="col">65kg</th>
<th class="col">70kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
Outras dicas
Há um jQuery muito decente plug-in que eu me deparei localizada aqui que faz um trabalho muito bom de esse tipo de coisa com um monte de exemplos. Preferencialmente eu usaria isso.
AFAIK CSS paira sobre TR
de não são suportadas no IE de qualquer maneira, então o melhor a parte TR de que só irá funcionar no Firefox.
Nunca sequer visto uma obra :hover
em uma col / colgroup então não tenho certeza se isso é possível ...
Pense que você pode ser preso com uma implementação Javascript.
Há um exemplo aqui que as obras (linhas e colunas) em Firefox mas novamente sua quebrado no IE ... cols não funcionam.
I veio em este maneira elegante de fazê-lo é a partir css-tricks.com Eu também preparou um violino, enquanto brincando com ele nada sofisticados, mas u pode começar a idéia sua com o mesmo código fornecido por essa página css-trick
// O Html
<table>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
// O Js
$(function(){
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
})
Resposta Moro ( https://jsfiddle.net/craig1123/d7105gLf/ )
Já existem CSS e jQuery respostas; no entanto, eu ter escrito uma resposta javascript puro simples.
A primeira vez que encontrar todas as marcas col
e td
, obter o índice de cada célula da coluna, fazendo element.cellIndex
, e depois adicionar uma classe CSS com um fundo em mouseenter
e removê-lo em mouseleave
.
HTML
<table id='table'>
<col />
<col />
<col />
<col />
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthdate</th>
<th>Preferred Hat Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abraham Lincoln</td>
<td>204</td>
<td>February 12</td>
<td>Stovepipe</td>
</tr>
<tr>
<td>Winston Churchill</td>
<td>139</td>
<td>November 30</td>
<td>Homburg</td>
</tr>
<tr>
<td>Rob Glazebrook</td>
<td>32</td>
<td>August 6</td>
<td>Flat Cap</td>
</tr>
</tbody>
</table>
CSS
body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
table th {
text-align: left;
}
table tr, table col {
transition: all .3s;
}
table tbody tr:hover {
background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
background-color: rgba(0, 140, 203, 0.2);
}
tr, col {
transition: all .3s;
}
tbody tr:hover {
background-color: rgba(0,140,203,.2);
}
col.hover {
background-color: rgba(0,140,203,.2);
}
JS
const col = table.getElementsByTagName('col');
const td = document.getElementsByTagName('td');
const columnEnter = (i) => col[i].classList.add('hover');
const columnLeave = (i) => col[i].classList.remove('hover');
for (const cell of td) {
const index = cell.cellIndex;
cell.addEventListener('mouseenter', columnEnter.bind(this, index));
cell.addEventListener('mouseleave', columnLeave.bind(this, index));
}