Самый быстрый способ использовать CSS для HTML-таблицы, не затрагивая другую HTML-таблицу

Question

Мой CSS находится на http://sillybean.net/css/seaglass.css, и я хочу использовать этот CSS только для одной из таблиц HTML. На этой же странице у меня есть несколько таблиц HTML, поэтому я не хочу влиять на другие таблицы HTML. Какой самый быстрый способ сделать это с меньшими изменениями на http://sillybean.net/css/seaglass.css?

Answer 1

Можете ли вы просто применить класс к таблице, на которую хотите повлиять, а затем использовать этот класс в своем CSS?

В своем HTML вы можете поместить:

<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>

А затем добавьте селектор класса в свой CSS:

table.mytable { border-collapse: collapse; border: 1px solid #839E99;
                background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }

Answer 2

Определите идентификатор или класс в вашем CSS, который повлияет на данную таблицу.

Затем в своем HTML-коде произнесите

<table id="theid"... /> 

или

<table class="theclass" ... />

CSS ID выглядит как

#theid
{
  //attributes
}

Классы выглядят так:

.theclass
{
  //attributes
}

Answer 3

для нескольких столов и классов

Таблица HTML

<table id="tableId1">
--Table Content--
</table>

<table id="tableId2">
--Table Content--
</table>

<table class="tableClass1">
--Table Content--
</table>

<table class="tableClass2">
--Table Content--
</table>

CSS Script

#tableId1, #tableId2
{
  //attributes
}

.tableClass1, .tableClass2
{
  //attributes
}

Answer 4

Это именно то, для чего нужны атрибуты id и class. Если вы не можете изменить разметку (как, например, стиль myspace), вам нужно использовать селекторы для более точного нацеливания на одну таблицу. Выбор селекторов - это то, что вам нужно решить самостоятельно.

Answer 5

Вот селекторы класса и разметка, которые будут стилизовать первую таблицу, но не вторую:

<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>

Или вы можете использовать селектор идентификаторов аналогичным образом:

<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>

Иногда вспыхивает религиозная война о том, какой из этих двух подходов использовать. Либо хорошо для ваших нужд. В соответствии со спецификацией, вы можете поместить данный идентификатор не более чем в один элемент HTML (но большинство браузеров позволяют нарушать это правило).

Answer 6

Выберите таблицу по классу для оформления нужной таблицы, например, если у вас есть таблица:

<table class="tableOne"></table>
<table class="tableTwo"></table>

Тогда в CSS вы будете использовать что-то вроде этого:

.classOne {
  /* do your stuff here*/
}

.classTwo {
  /* do your stuff here*/
}

Answer 7

Хотя вы должны добавить класс в таблицу, на которую хотите повлиять, давайте предположим, что вы можете изменять только CSS. В этом случае вы можете стать довольно модным с селекторами . Но не все браузеры поддерживают их. Вы можете видеть, что CSS 2 селекторы не поддерживают концепцию n-го дочернего элемента. В противном случае, если у вас есть HTML как:

<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>

Вы можете нацелить первое с помощью селекторов CSS2, но второе и третье могут быть нацелены только с CSS3.

table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */

Answer 8

Применить имя класса к таблице, к которой вы хотите применить css, все в порядке ...