Как удалить все унаследованное форматирование CSS для таблицы?
-
13-09-2019 - |
Вопрос
У меня есть таблица, которая имеет определенный стиль благодаря CSS-файлу страницы (у нее синие рамки и т. д.).
Есть ли простой способ удалить CSS для этой конкретной таблицы?Я думал что-то вроде команды вроде:
style="nostyle"
Существует ли что-нибудь подобное?
Решение
Попробуй это.
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Другие советы
Используйте сброс CSS, например Сброс CSS YUI.
Искал что-то подобное на веб-сайте, где использовались оба jqueryui и плагин для сортировки таблиц, для таблицы внутри таблицы tablesorter.Хотя некоторые ответы здесь помогли, этого было недостаточно, тем более что tablesorter использует :hover, а jquery ui использует скругление углов и т. д.Вот что я придумал:
Я объявил класс, который при применении к таблице очистит ее до некоторых разумных значений по умолчанию.Крайне важно, чтобы этот CSS был объявлен перед любыми другими классами, для которых может потребоваться очистка, т.е. <link>
к нему или поместите его в <style>
тег вверху вашего <head>
раздел.
.defaulttable {
display: table;
}
.defaulttable thead {
display: table-header-group;
}
.defaulttable tbody {
display: table-row-group;
}
.defaulttable tfoot {
display: table-footer-group;
}
.defaulttable tbody>tr:hover,
.defaulttable tbody>tr {
display: table-row;
}
.defaulttable tbody>tr:hover>td,
.defaulttable tbody>tr>td {
display: table-cell;
}
.defaulttable,
.defaulttable tbody,
.defaulttable tbody>tr:hover,
.defaulttable tbody>tr,
.defaulttable tbody>tr:hover>td,
.defaulttable tbody>tr>td,
.defaulttable tbody>tr:hover>th,
.defaulttable tbody>tr>th,
.defaulttable thead>tr:hover>td,
.defaulttable thead>tr>td,
.defaulttable thead>tr:hover>th,
.defaulttable thead>tr>th,
.defaulttable tfoot>tr:hover>td,
.defaulttable tfoot>tr>td,
.defaulttable tfoot>tr:hover>th,
.defaulttable tfoot>tr>th {
background: transparent;
border: 0px solid #000;
border-spacing: 0px;
border-collapse: separate;
empty-cells: show;
padding: 0px;
margin: 0px;
outline: 0px;
font-size: 100%;
color: #000;
vertical-align: top;
text-align: left;
font-family: sans-serif;
table-layout: auto;
caption-side: top;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
Затем просто примените класс к таблице, которую вы хотите использовать по умолчанию:
<table class="defaulttable and whatever else you want">
<tbody>
<tr>
<td>This will appear with sensible defaults.</td>
</tr>
</tbody>
</table>
Если вы хотите убедиться, что вы отключили CSS для всех свойств, вы можете использовать следующее:
table, caption, tbody, tfoot, thead, tr, th, td {
all: unset;
}
Документация MDN по all
свойство: https://developer.mozilla.org/en-US/docs/Web/CSS/all