Javascript.RU

Форум

 Учебник Node.JS скринкаст Стандарт языка

Справочник

Discord чат

  
Статьи Тест знаний Аналоги функций PHP

Курсы javascript

  Сообщения за день

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.10.2016, 18:30
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star 		 
Регистрация: 11.07.2016
Сообщений: 300

Как покрасить нужные строчки таблиц ?
Добрый день, уважаемые. Возникла необходимость сменить фон только у определенных ячеек таблици.(по строкам) Хотелось бы написать через псевдоклассы CSS, но что то не могу докумекать как формулу прописать 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

#text_scheduleBox table, #text_scheduleBox th {
    text-align: center;
    vertical-align: middle;
    margin: 1%;
    padding: 1.5%;
    border: 1px solid black;
}

#text_scheduleBox td {
    width: auto;
      margin: 1%;
     border: 1px solid black;
}

#text_scheduleBox td:nth-child(even){
    background-color: red;
}



	</style>
</head>
<body>
	
	            <div id="text_scheduleBox">

            <fieldset>
                    <legend> OUR SCHEDULE </legend>
                        <table>

  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
    <th>Sunday</th>
  </tr>
  <tr>
    <td rowspan="2">9-00...11-00</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">11-00...13-00</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">13-00...15-00</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">15-00...17-00</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td rowspan="2">17-00...19-00</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>-</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">19-00...21-00</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>-</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">21-00...23-00</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
</table>


            </fieldset>
  
            </div>

</body>
</html>



Выглядит оно так https://jsfiddle.net/BlackStar1991/e87z9s0j/

А хотелось бы что б выглядело так
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2016, 18:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,108

Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">

#text_scheduleBox table, #text_scheduleBox th {
    text-align: center;
    vertical-align: middle;
    margin: 1%;
    padding: 1.5%;
    border: 1px solid black;
}

#text_scheduleBox td {
    width: auto;
      margin: 1%;
     border: 1px solid black;
}

#text_scheduleBox tr:nth-child(2n+3){
    background-color: #FFAFB1;
}

#text_scheduleBox tr:nth-child(2n) td:nth-child(n+2){
    background-color:  #ADCFFF;
}

  </style>
</head>
<body>

              <div id="text_scheduleBox">

            <fieldset>
                    <legend> OUR SCHEDULE </legend>
                        <table>

  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
    <th>Sunday</th>
  </tr>
  <tr>
    <td rowspan="2">9-00...11-00</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">11-00...13-00</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">13-00...15-00</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">15-00...17-00</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td rowspan="2">17-00...19-00</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>-</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">19-00...21-00</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>-</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">21-00...23-00</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
</table>


            </fieldset>

            </div>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 10.10.2016, 19:22
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star 		 
Регистрация: 11.07.2016
Сообщений: 300

Классно, спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2016, 11:51
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M. 		 
Регистрация: 08.11.2011
Сообщений: 806

можно привязаться к атрибуту rowspan
вместо
#text_scheduleBox tr:nth-child(2n+3){
    background-color: #FFAFB1;
}

#text_scheduleBox tr:nth-child(2n) td:nth-child(n+2){
    background-color:  #ADCFFF;
}

использовать
#text_scheduleBox td:not([rowspan]) {
    background-color: #FFAFB1;
}
#text_scheduleBox td[rowspan] ~ td{
    background-color: #ADCFFF;
}


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">

#text_scheduleBox table, #text_scheduleBox th {
    text-align: center;
    vertical-align: middle;
    margin: 1%;
    padding: 1.5%;
    border: 1px solid black;
}

#text_scheduleBox td {
    width: auto;
      margin: 1%;
     border: 1px solid black;
}

#text_scheduleBox td:not([rowspan]) {
    background-color: #FFAFB1;
}
#text_scheduleBox td[rowspan] ~ td{
    background-color: #ADCFFF;
}
    
  </style>
</head>
<body>

              <div id="text_scheduleBox">

            <fieldset>
                    <legend> OUR SCHEDULE </legend>
                        <table>

  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
    <th>Sunday</th>
  </tr>
  <tr>
    <td rowspan="2">9-00...11-00</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">11-00...13-00</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">13-00...15-00</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Abraham</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">15-00...17-00</td>
    <td>Abraham</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td rowspan="2">17-00...19-00</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Oleg</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>-</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">19-00...21-00</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>Abraham</td>
    <td>Evgeniya</td>
    <td>-</td>
    <td>Evgeniya</td>
  </tr>
  <tr>
    <td rowspan="2">21-00...23-00</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Eugene</td>
    <td>Dmitry</td>
    <td>Dmitry</td>
  </tr>
  <tr>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
</table>


            </fieldset>

            </div>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 11.10.2016, 12:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,108

Pavel M.,
ок!
Ответить с цитированием
Ответ

« Как написать текст поверх картинки | автоматическая форма при закрытии страницы »


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 21:24
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как организовать RichEdit arma Элементы интерфейса 2 18.02.2010 14:57
О наследовании событий, или как корректно его отменить. JCShen Events/DOM/Window 8 09.02.2010 00:00
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20


© Илья Кантор, 2007-2021 О проекте - Обратная связь - Архив форума - Вверх