Как поставить цвет <td> по вертикали?

Я создаю таблицу с помощью html и добавляю несколько дизайнов с помощью css

Я уже создал таблицу и поставил цвет фона по горизонтали / по строкам, как это, но я хочу сделать его вертикальным Как поставить цвет <td> по вертикали?

а вот мой html-код

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
}

table tr:nth-child(2n-1) td {
  background: #F5F5F5;
}

table th,
table td {
  text-align: center;
}

table th {
  padding: 5px 20px;
  color: #5D6975;
  border-bottom: 1px solid #C1CED9;
  white-space: nowrap;        
  font-weight: normal;
}

table .service,
table .desc {
  text-align: left;
}

table td {
  padding: 20px;
  text-align: right;
}

table td.service,
table td.desc {
  vertical-align: top;
}

table td.unit,
table td.qty,
table td.total {
  font-size: 1.2em;
}

table td.grand {
  border-top: 1px solid #5D6975;;
}

 <main>
      <table border = "1">
        <thead>
          <tr>
          </tr>
        </thead>
        <tbody>
          <tr>
						<td class = "service"><span style = "color:#ac0043">房间号 ( UNIT NO. )</span></td>
						<td class = "service"><span style = "color:#ac0043">费用 ( RATE )</span></td>
					</tr>
        	<tr>
            <td class = "service"></td>
						<td class = "service">AED: /-</td>
					</tr>
     			<tr>
            <td class = "service"></td>
						<td class = "service"></td>
					</tr>
      		<tr>
            <td class = "service">5% VAT（增值税）</td>
            <td class = "service">AED: /-</td>
					</tr>
     			<tr>
            <td class = "service"></td>
						<td class = "service"></td>
					</tr>
      		<tr>
						<td class = "service"><span style = "color:#ac0043">TOTAL (共计):</span></td>
						<td class = "service"><span style = "color:#ac0043">AED:</span> /-</td>
					</tr>
        </tbody>
      </table>
    </main>

Я использую этот код, чтобы сделать фон горизонтальным / построчным

table tr:nth-child(2n-1) td {
  background: #F5F5F5;
}

Вопрос в том, как поставить фон по вертикали или по столбцам?

Спасибо!

html css

17.03.2018 09:12

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
}

table tr td:nth-child(2n-1) {
  background: #F5F5F5;
}

table th,
table td {
  text-align: center;
}

table th {
  padding: 5px 20px;
  color: #5D6975;
  border-bottom: 1px solid #C1CED9;
  white-space: nowrap;        
  font-weight: normal;
}

table .service,
table .desc {
  text-align: left;
}

table td {
  padding: 20px;
  text-align: right;
}

table td.service,
table td.desc {
  vertical-align: top;
}

table td.unit,
table td.qty,
table td.total {
  font-size: 1.2em;
}

table td.grand {
  border-top: 1px solid #5D6975;;
}

 <main>
      <table border = "1">
        <thead>
          <tr>
          </tr>
        </thead>
        <tbody>
          <tr>
						<td class = "service"><span style = "color:#ac0043">房间号 ( UNIT NO. )</span></td>
						<td class = "service"><span style = "color:#ac0043">费用 ( RATE )</span></td>
					</tr>
        	<tr>
            <td class = "service"></td>
						<td class = "service">AED: /-</td>
					</tr>
     			<tr>
            <td class = "service"></td>
						<td class = "service"></td>
					</tr>
      		<tr>
            <td class = "service">5% VAT（增值税）</td>
            <td class = "service">AED: /-</td>
					</tr>
     			<tr>
            <td class = "service"></td>
						<td class = "service"></td>
					</tr>
      		<tr>
						<td class = "service"><span style = "color:#ac0043">TOTAL (共计):</span></td>
						<td class = "service"><span style = "color:#ac0043">AED:</span> /-</td>
					</tr>
        </tbody>
      </table>
    </main>

17.03.2018 09:14

Ответ принят как подходящий

Просто измените цель css, например:

ставить :nth-child(2n-1) на td, вместо tr

table tr td:nth-child(2n-1) {
  background: #F5F5F5;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
}

table tr td:nth-child(2n-1) {
  background: #F5F5F5;
}

table th,
table td {
  text-align: center;
}

table th {
  padding: 5px 20px;
  color: #5D6975;
  border-bottom: 1px solid #C1CED9;
  white-space: nowrap;        
  font-weight: normal;
}

table .service,
table .desc {
  text-align: left;
}

table td {
  padding: 20px;
  text-align: right;
}

table td.service,
table td.desc {
  vertical-align: top;
}

table td.unit,
table td.qty,
table td.total {
  font-size: 1.2em;
}

table td.grand {
  border-top: 1px solid #5D6975;;
}

<main>
      <table border = "1">
        <thead>
          <tr>
          </tr>
        </thead>
        <tbody>
          <tr>
						<td class = "service"><span style = "color:#ac0043">房间号 ( UNIT NO. )</span></td>
						<td class = "service"><span style = "color:#ac0043">费用 ( RATE )</span></td>
					</tr>
        	<tr>
            <td class = "service"></td>
						<td class = "service">AED: /-</td>
					</tr>
     			<tr>
            <td class = "service"></td>
						<td class = "service"></td>
					</tr>
      		<tr>
            <td class = "service">5% VAT（增值税）</td>
            <td class = "service">AED: /-</td>
					</tr>
     			<tr>
            <td class = "service"></td>
						<td class = "service"></td>
					</tr>
      		<tr>
						<td class = "service"><span style = "color:#ac0043">TOTAL (共计):</span></td>
						<td class = "service"><span style = "color:#ac0043">AED:</span> /-</td>
					</tr>
        </tbody>
      </table>
    </main>

17.03.2018 09:15

Другие вопросы по теме

Изображение внутри гибкого родителя с max-height и max-width и object-fit содержат

CSS - Flexbox / Bootstrap ВСЕ ЕЩЕ имеет горизонтальную прокрутку ПОМОЩЬ! D:

Цвет фона кнопки статуса нестандартного заказа в списке заказов администратора Woocommerce 3.3

Выбрать элемент без тега

Позиционировать ошибку пользовательской формы в разных адаптивных режимах

Как изменить стиль родительского многоразового компонента из его дочернего компонента?

Путаница с границами CSS

Внешний блок не подходит для поля ввода

Я не могу установить радиус границы для div, помещенного внутри td, с помощью встроенного CSS

Пользовательский переключатель не может центрировать псевдоэлемент

Как поставить цвет <td> по вертикали?

Ответы 2

Другие вопросы по теме

Похожие вопросы