Таблицы не должны быть установлены на display: block
. Строки и ячейки таблицы тоже не должны. Они имеют разные значения дисплея. Мой совет? Не делай так. Используйте класс:
.hidden {
display: none;
}
и динамически добавьте его и удалите из таблицы, чтобы избежать проблем с установкой правильного типа отображения для отображаемого элемента.
Редактировать: Чтобы уточнить комментарий о том, почему так и что происходит. Попробуйте это:
<table>
<tr>
<td>Cell 1</td>
<td style="display: block;">Cell 2</td>
</tr>
</table
Это будет (или должно) испортить ваш стол. Почему, потому что элемент <td>
по умолчанию имеет display: table-cell
, а не block
. Таблицы одинаковые. У них есть display: table
.
Сброс атрибутов CSS ... проблематичен.
Таким образом, вам лучше всего использовать классы для установки и сброса атрибутов. Его легче изменить (класс находится в файле CSS и не является кодом), он позволяет избежать проблем, таких как установка значения обратно на правильное исходное значение, и обычно обеспечивает более чистое решение, особенно при использовании с такой библиотекой, как jQuery. В jQuery вы можете сделать:
$("table").toggleClass("hidden");
Готово.
Или вы можете использовать addClass()
и removeClass()
, если это более уместно. Например:
<input type="button" id="hide" value="Hide Table">
...
<table id="mytable">
...
и
$(function() {
$("#hide").click(function() {
if ($("#mytable").is(".hidden")) {
$("#hide").val("Hide Table");
$("#mytable").removeClass("hidden");
} else {
$("#hide").val("Show Table");
$("#mytable").addClass("hidden");
}
});
});
И вот у вас есть надежное, краткое и простое для понимания решение (как только вы разберетесь с синтаксисом jQuery, который не займет много времени).
Возиться с Javascript напрямую - это так 2002.: -)