Esconder células vazias na mesa
Eu quero esconder as células vazias na mesa. Aqui está o meu código:
$(function() {
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty() {
var theCell = $(this);
if (theCell.html().length == 0) {
hideSoft(theCell);
}
}
function hideSoft(jQElement) {
jqElement.css('visibility', 'hidden');
}
table.empty {
width: 350px;
border-collapse: collapse;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
Você pode ver, célula vazia é mostrada na segunda linha. Mas eu quero esconder isso. Além disso, eu não quero usarborder-collapse:separate
. É possível esconder a célula vazia usandoborder-collapse:collapse
? Eu também quero saber por que isso está mostrando as células vazias.
P.S. Usandoborder-collapse: separate
está funcionando e não mostra células vazias.
$(function() {
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty() {
var theCell = $(this);
if (theCell.html().length == 0) {
hideSoft(theCell);
}
}
function hideSoft(jQElement) {
jqElement.css('visibility', 'hidden');
}
table.empty {
width: 350px;
border-collapse: separate;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
<th>Title three</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
<td class="empty">value</td>
</tr>
</table>
Mas isso não responde a essas perguntas:
Por que células vazias são exibidas quandoborder-collapse: collapse
é usado ?
Por que a célula vazia não é exibida quandoborder-collapse: separate
é usado ?