Блог

Главная - Вопросы по программированию - Границы таблицы / отдельное редактирование

Границы таблицы / отдельное редактирование

#html #css

#HTML #css

Вопрос:

Я работаю над проектом HTML / CSS для своей школы, но столкнулся с проблемой. На одной из моих страниц у меня есть 3 таблицы, которые я хочу редактировать с помощью CSS отдельно. Я попытался поместить class во все таблицы, но он по-прежнему принимает только команды второй таблицы. Должен ли я также помещать class во все TRS и TDS?

 body {
  background-color: lightgrey;
}
.tabel1 {
  border-color: purple;
  width: 400px;
  text-align: center;
  height: 100px;
}
.tabel2,
tr,
td {
  width: 350px;
  border-color: grey;
  border-style: solid;
  border-collapse: collapse;
}
.tabel3 {
  border-radius: 25px;
  background: purple;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 4%;
  padding-top: 4%;
  width: 400px;
  border-color: purple;
  box-shadow: 15px 6px 10px purple;
}
.tr1 {
  background-color: purple;
}
.tr2 {
  background-color: #9370DB;
}
.tr3 {
  background-color: purple;
}
.tr4 {
  background-color: #9370DB;
}
.tr5 {
  background-color: purple;
}
.tr6 {
  background-color: #9370DB;
}
.tr7 {
  background-color: purple;
}  
 <table class="tabel1" align="center">
  <tr>
    <td><strong>Film-Favo's</strong>
    </td>

  </tr>
</table>
<br>

<table class="tabel2" align="center">
  <tr class="tr1">
    <td>Film</td>
    <td>Regisseur</td>
  </tr>

  <tr class="tr2">
    <td>Film 1</td>
    <td>Regisseur 1</td>
  </tr>

  <tr class="tr3">
    <td>De noorderlingen</td>
    <td>Ales van warmerdam</td>
  </tr>

  <tr class="tr4">
    <td>Film 3</td>
    <td>Regisseur 3</td>
  </tr>

  <tr class="tr5">
    <td>Film 4</td>
    <td>Regisseur 4</td>
  </tr>

  <tr class="tr6">
    <td>Film 5</td>
    <td>Regisseur 5</td>
  </tr>

  <tr class="tr7">
    <td>Film 6</td>
    <td>Regisseur 6</td>
  </tr>
</table>
<br>

<table align="center" class="tabel3">
  <tr>
    <td bgcolor="#EE82EE">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</td>
  </tr>

Комментарии:

1. можете ли вы опубликовать свой html.

2. Вы неправильно написали «таблица» в своем HTML, чтобы соответствовать? В вашем CSS нет ничего плохого, что мы могли бы сказать, не видя вашу разметку.

3. Я просто проверяю это, это должно сработать, класс правильный как в html, так и в css (я тоже могу загрузить свой html, если вы хотите взглянуть на него)

4. Просто разместите разметку таблицы. Нам не нужен весь документ. Кроме того, фундаментальный смысл программирования указывает на то, что вы должны правильно расставлять отступы. Для этого используйте любой из множества редакторов с автоматическим отступом.

5. Вы не закрываете 3-ю таблицу с </table помощью > tag

Ответ №1:

Если вы удалите спецификацию tr, td, ваши таблицы будут оформлены по-другому. Ваш CSS должен применяться к table , а не к строкам или ячейкам.

Вот демонстрация скрипки.

CSS

 body {
  background-color: lightgrey;
}

.tabel1 {
  border-color: purple;
  width: 400px;
  text-align: center;
  height: 100px;
}

.tabel2 {
  width: 350px;
  border-color: grey;
  border-style: solid;
  border-collapse: collapse;
}

.tabel3 {
  border-radius: 25px;
  background: purple;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 4%;
  padding-top: 4%;
  width: 400px;
  border-color: purple;
  box-shadow: 15px 6px 10px purple;
}

HTML

 <table class="tabel1">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>
<table class="tabel2">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>
<table class="tabel3">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>

Результат

Результат

Ответ №2:

Наиболее очевидная вероятная проблема заключается в том, что вы применили идентичные стили ко table2 всем tr элементам и ко всем td элементам с этим правилом:

 .tabel2,
tr,
td {}

Изучите селекторы потомков и, возможно, попробуйте это:

 .table2,
.tabel2 tr,
.table2 td {}

Почему-то я сомневаюсь, что это то, чего вы действительно хотите.

Ответ №3:

 table, th, td {
   border: 1px solid black;
}