Блог

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

Это возможно, это должно работать должным образом!

Вот пример

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

Как писал Aleks, я бы определил 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

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

Для оформления td используйте:

 .calendar_table td {
}
  

Или:

 .calendar_table tr td {
}
  

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

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

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

Приведенные выше ответы либо устарели, либо на них нет правильного ответа, поскольку они игнорируют стиль table самого td , а не только элементов th or и т. Д.

Если бы у нас была таблица, подобная этой:

 <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;
  }
}
  

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

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

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

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

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

Симпатичная тема зеленого стола :

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;
}