Я створив таблицю в ASPX. Я хочу приховати один із стовпців на основі вимоги, але немає атрибута, як visibleу побудові таблиці HTML. Як я можу вирішити свою проблему?
Я створив таблицю в ASPX. Я хочу приховати один із стовпців на основі вимоги, але немає атрибута, як visibleу побудові таблиці HTML. Як я можу вирішити свою проблему?
Відповіді:
Для цього потрібно використовувати Таблицю стилів.
<td style="display:none;">td:first-child { display:none; }
Ви можете використовувати nth-childселектор CSS, щоб приховати цілий стовпець:
#myTable tr > *:nth-child(2) {
display: none;
}Це працює за умови, що комірка стовпця N (будь то a thабоtd ) завжди дочірній елемент Nth його рядки.
Якщо ви хочете, щоб номер стовпця був динамічним, ви можете зробити це, використовуючи querySelectorAllбудь-яку структуру, що представляє подібну функціональність, як jQueryтут:
$('#myTable tr > *:nth-child(2)').hide();(Рішення jQuery також працює на застарілих браузерах, які не підтримуютьnth-child ).
Ви також можете використовувати:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">Різниця між ними, що "прихований" приховує клітинку, але вона утримує простір, але при "згортанні" простір не утримується як дисплей: немає. Це важливо при приховуванні цілого стовпця або рядка.
visibility: collapseрозроблений спеціально для обробки відображення / приховування комірок, оскільки існує різниця при перерахунку ширини / висоти комірки між цим та display:none. Див. Developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
Відповідь Коса майже правильна, але може мати шкідливі побічні ефекти. Це правильніше:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}CSS (каскадні таблиці стилів) буде каскадувати атрибути для всіх своїх дочірніх елементів. Це означає, що *:nth-child(1)буде приховано перший tdз кожного tr І прихований перший елемент усіх tdдітей. Якщо хтось із вашихtd є щось на кшталт кнопок, піктограм, входів чи виділень, перший з них буде прихований (ого!).
Навіть якщо ви цього зараз не робите немає речей, які будуть приховані, уявіть своє розчарування в дорозі, якщо вам потрібно додати. Не карайте свого майбутнього так, це буде болем для налагодження!
Моя відповідь буде тільки приховати перший tdі thна все trв #myTableцілості ваших інші елементи безпеки.
Люди Bootstrap використовують .hiddenклас <td>.
Ви також можете приховати стовпець, використовуючи елемент col https://developer.mozilla.org/en/docs/Web/HTML/Element/col
Щоб приховати другий стовпець у таблиці:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>Відомі проблеми: це не працюватиме в Google Chrome. Будь ласка, проголосуйте за помилку на https://bugs.chromium.org/p/chromium/issues/detail?id=174167
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>використовуйте .hideFullColumn у таблиці та .hidecol у th. Вам не потрібно додавати клас у td окремо, оскільки це буде проблемою, оскільки індекс може не мати на увазі кожен td.
Ви також можете робити те, що vs dev пропонує програмно, призначивши стиль за допомогою Javascript, перебираючи стовпці та встановлюючи елемент td у певному індексі, щоб мати цей стиль.
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>
var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table tr td:nth-child("+ column +"),table th:nth-child("+ column +")
{display: none}";
styleSheet.insertRule(rule);