it-swarm.com.ru

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

Разве невозможно стилизовать <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;
}
7
jamietelin

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

Вот пример

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

12
David

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

<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/

3
user3815508

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

Чтобы стилизовать тд, используйте:

.calendar_table td {
}

Или же:

.calendar_table tr td {
}

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

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

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

2
justkt

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

1
check123

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

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

.calendar_table td {
    margin:0;
    padding:4px;
}
1
Diodeus - James MacFarlane
  • Таблицы расширяются, если необходимо, чтобы содержимое соответствовало
  • Насколько я знаю, строки таблицы не имеют полей или отступов

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

1
Álvaro González

Приведенные выше ответы либо являются старыми, либо не отвечают должным образом, поскольку они игнорируют стилизацию самого 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;
  }
}
0
Aleks

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

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;
}
0
Sujay U N