Как удалить все унаследованные CSS-форматирование для таблицы? - PullRequest
Новая
       7

Как удалить все унаследованные CSS-форматирование для таблицы?

24 голосов
/ 09 июня 2009

У меня есть таблица, которая имеет определенный стиль из-за файла CSS для страницы (она имеет синие рамки и т. Д.)

Есть ли простой способ удалить CSS для этой конкретной таблицы? Я думал что-то вроде команды вроде: 

style="nostyle"

Существует ли что-нибудь подобное?

Ответы [ 4 ]

39 голосов
/ 09 июня 2009

Попробуйте это.

От Сброс Эрика Мейера CSS 

table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
3 голосов
/ 09 июня 2009

Используйте сброс CSS как Сброс CSS YUI .

1 голос
/ 06 ноября 2015

Искал что-то подобное на веб-сайте, который использовал jqueryui и плагин TableSorter , для таблицы внутри таблицы 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>
0 голосов
/ 22 августа 2017

Если вы хотите убедиться, что вы сбросили CSS для всех свойств, вы можете использовать следующее: 

table, caption, tbody, tfoot, thead, tr, th, td {
    all: unset;
}

MDN Документация по all свойству: https://developer.mozilla.org/en-US/docs/Web/CSS/all

...