Класс на столе?

Question

Разве невозможно стилизовать <table> и <tr> <td> с использованием классов CSS?

Например:

<table class="calendar_table">
<tr>
        <td>
            <h2>Datum</h2>
        </td>
        <td>
            <h2>Event</h2>
        </td>
        <td>
            <h2>Type</h2>
        </td>
    </tr>
</table>

Затем используйте что-то вроде этого CSS:

.calendar_table {
    width:880px;
}
.calendar_table tr {
    margin:0;
    padding:4px;
}

Answer 1

Возможно, это должно работать правильно!

Вот пример

Веселитесь, вы можете делать все, что захотите!Я не рекомендую использовать <table>, если только он не используется для представления структурированных данных, которые должны быть в таблице.Если вы хотите нарисовать макет, используйте <div> и CSS!

Answer 2

Как писал Алекс, я бы тоже определил css для самой таблицы.Но нет вложенных скобок в определении CSS, например: table.custom_class {... td, th {...} }.

<table class="custom_class">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>Giovanni</td>
    <td>Rovelli</td>
  </tr>
  <tr>
    <td>Roland</td>
    <td>Mendel</td>
  </tr>
</table>

Следующий CSSНапример, можно использовать:

table.custom_class {
    border:solid 5px #006CFF;
    margin:0px;
    padding:0px;
    border-spacing:0px;
    border-collapse:collapse;
    line-height:22px;
    font-size:13px;
    font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
    font-weight:400;
    text-decoration:none;
    color:#0018ff; 
    white-space:pre-wrap;
}
table.custom_class th {
  padding: 20px;
  background-color:#98dcff;
  border:solid 2px #006CFF;
}
table.custom_class td {
  padding: 20px;
  border:solid 1px #006CFF;
}
table.custom_class tr {
    margin:0;
    padding:4px;
}

Вы можете увидеть это в действии https://jsfiddle.net/16L9h2ft/

Answer 3

Да, это возможно. То, что у вас есть , работает в некоторой степени (с настройками).

Чтобы оформить тд, используйте:

.calendar_table td {
}

Или:

.calendar_table tr td {
}

также будет работать.

Для установки таких атрибутов, как границы, цвета и размеры, это более чистый способ, чем встраивание этой информации в HTML.

Этот подход хорош для таблиц данных, где информация должна быть представлена ​​в виде таблицы. Если вы размещаете данные, используйте более семантически правильные теги, такие как <div> и <span>.

Answer 4

• Таблицы расширяются при необходимости, чтобы содержимое соответствовало
• Насколько я знаю, строки таблицы не имеют полей или отступов

Эти правила размещения применяются независимо от того, как вы их установили.

Answer 5

Строки таблицы не требуют заполнения, TD -.

Измените свой стиль на:

.calendar_table td {
    margin:0;
    padding:4px;
}

Answer 6

Ваш подход совершенно действителен!

Answer 7

Приятно выглядящая зеленая тема стола:

https://jsfiddle.net/sujayun/qwsLk3aL/

table.namTblCls
{
    color:purple;
    border: #004400 4px solid;
    border-collapse: collapse;
    font-size:16px;
}

table.namTblCls th
{
    text-align: center;
    color:yellow;
    background-color:#008800;
    border: #004400 2px solid;
    padding: 20px;
}

table.namTblCls td
{
    text-align: center;
    padding: 20px;
    border: #004400 1px solid ;
    border-right-width: 2px;
    border-left-width: 2px;
}

table.namTblCls tr:nth-child(odd)
{
    background-color: #DDFFDD;
}

table.namTblCls tr:nth-child(even)
{
    background-color: #BBFFBB;
}

Answer 8

Ответы выше либо старые, либо не отвечают должным образом, поскольку они игнорируют стилизацию самого table, а не только элементов td или th и т. Д.

Если бы у нас была такая таблица:

<table class="custom_class">
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row value 1</td>
      <td>row value 2</td>
      </tr>
  </tbody>
</table>

Тогда в .css мы должны положить:

table.custom_class  {
  border: 1px solid black;

  td, th {
    color: blue;
  }
}