Неравномерные ячейки таблицы при изменении отображения нет

-1

У меня возникают проблемы с моими HTML-таблицами, когда я скрываю и показываю строки с использованием JavaScript (display: block). Мне нужно скрыть строки с помощью JavaScript, но когда я снова показываю строки, я обнаруживаю, что макет сетки таблицы потерян, а ранее скрытая строка свернута в левую часть сетки.Неравномерные ячейки таблицы при изменении отображения нет

Мой песочница код выглядит следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
    table { 
    } 
    .rowA { 
     background-color: #70cdb3; 
    } 
    .rowB { 
     background-color: #fff1dc; 
    } 
    .rowC { 
     background-color: #edc7ff; 
    } 
    .cell { 
     border: solid 3pt white; 
     width:25%; 
    } 
    a { 
     cursor: pointer; 
    } 
</style> 

<SCRIPT type='text/JavaScript'> 
    function hide(elemid) { 
     var elem=document.getElementById(elemid); 
     elem.style.display='none'; 
    } 

    function show(elemid) { 
     var elem=document.getElementById(elemid); 
     elem.style.display='block'; 
    } 
</SCRIPT> 
</head> 
<body> 

<table> 
<tr class='rowA'> 
    <td class='cell'> 
    <a onClick="hide('row1')">Hide Row1</a> 
    </td> 
    <td class='cell'> 
    <a onClick="show('row1')">show Row1</a> 
    </td> 
</tr> 
<tr class='rowB'> 
    <td class='cell'> 
    <a onClick="hide('row2')">Hide Row2</a> 
    </td> 
    <td class='cell'> 
    <a onClick="show('row2')">show Row2</a> 
    </td> 
</tr> 
<tr class='rowC'> 
    <td class='cell'> 
    <a onClick="hide('row3')">Hide Row3</a> 
    </td> 
    <td class='cell'> 
    <a onClick="show('row3')">show Row3</a> 
    </td> 
</tr> 
</table> 
<hr> 
<table class='table' style='width:50%'> 
<thead> 
<tr> 
    <th>ID</th> 
    <th>Name</th> 
    <th>Job</th> 
    <th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr class='rowA' id='row1'> 
    <td class='cell'>one</td> 
    <td class='cell'>Johnny Five</td> 
    <td class='cell'>Robotin'</td> 
    <td class='cell'>[email protected]</td> 
</tr> 
<tr class='rowB' id='row2'> 
    <td class='cell'>two</td> 
    <td class='cell'>Super notsolong</td> 
    <td class='cell'>Doin' stuff</td> 
    <td class='cell'>[email protected]</td> 
</tr> 
<tr class='rowC' id='row3'> 
    <td class='cell'>three</td> 
    <td class='cell'>Super Superlonglastnamesmith</td> 
    <td class='cell'>Doin' stuff</td> 
    <td class='cell'>[email protected]</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html>

Используя песочницу, проблема, когда я нажимаю на кнопки Скрыть строку в верхней части песочницы, а затем показать строку еще раз - то строки ячейки разрушаются влево.

Заметим, что это, кажется, происходит в IE 10, Edge, Chrome и Firefox, но не IE9

Что я делаю неправильно?

Благодаря

источник

2015-11-01 user1432181

вариант отображения по умолчанию для строк таблицы table-row, вы не можете использовать block ,

function show(elemid) { 
    var elem=document.getElementById(elemid); 
    elem.style.display='table-row'; 
}

В случае сомнений вы можете установить пустое значение для свойства отображения, оно вернется к своему значению по умолчанию.

Это тоже будет работать.

function show(elemid) { 
    var elem=document.getElementById(elemid); 
    elem.style.display=''; 
}

источник

2015-11-01 14:05:36

<tr> не блочный элемент. Таким образом, отображение этого как такового в контексте таблицы создает странные результаты. Правильное значение здесь display:table-row;

Проверьте, пожалуйста, здесь: http://jsfiddle.net/v05nhb9y/

ваш код будет выглядеть следующим образом, то:

function hide(elemid) { 
    var elem=document.getElementById(elemid); 
    elem.style.display='none'; 
} 

function show(elemid) { 
    var elem=document.getElementById(elemid); 
    elem.style.display='table-row'; 
}

источник

2015-11-01 14:05:32

Неравномерные ячейки таблицы при изменении отображения нет

ответ

Смежные вопросы