How can I create a html table with colors by row and by column? [duplicate]

问题: This question already has an answer here: Using CSS :even and :odd pseudo-classes with list items 8 answers I have seen this image showing a very n...

问题:

This question already has an answer here:

I have seen this image showing a very nice table:

enter image description here

I have html code that gives color to every even line. Every year column and subcolumns have a color too. Is there a way to have a new different mixed color for the cells in year coluns and even rows and a new different mixed color for the cells in year coluns and odd rows, just like in the picture? I do not want to use something like:

.mixed_odd {background-color: #44ff99}
.mixed_even {background-color: #99ff99}

because my page will have many rows, more than 200 in some cases and it takes a lot of time to set the color to those columns manually. Is there a fast css way to do it like in the picture?

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

.beta td {
  text-align: center;
}

TH.Title {
  background-color: #A0E0A0
}

tr:nth-child(even) {
  background-color: #bbffcc;
}

.Year2016 {
  background-color: #ffff99
}

.Year2017 {
  background-color: #ccff99
}

.Year2018 {
  background-color: #ffff99
}
<TABLE class="beta" cellspacing="2" cellpadding="6" border="1">
  <TR>
    <TH class="Title" rowspan="2">code</TH>
    <TH class="Title" rowspan="2">Text</TH>
    <TH class="Title" rowspan="2">Text</TH>
    <TH class="Title" rowspan="2">Text</TH>
    <TH class="Title" rowspan="2">Text</TH>
    <th class="Year2016" colspan="2">2016 Items</th>
    <th class="Year2017" colspan="2">2017 items</th>
    <th class="Year2018" colspan="2">2018 Items</th>
  </tr>

  <TR>
    <TH class="Year2016">Item 1</TH>
    <TH class="Year2016">Item 2</TH>
    <TH class="Year2017">Item 1</TH>
    <TH class="Year2017">Item 2</TH>
    <TH class="Year2018">Item 1</TH>
    <TH class="Year2018">Item 2</TH>
  </TR>
  <TR>
    <TD>1</TD>
    <TD>text 1</TD>
    <TD>text 2</TD>
    <TD>text 3</TD>
    <TD>text 4</TD>
    <TD class="Year2016">5</TD>
    <TD class="Year2016">6</TD>
    <TD class="Year2017">7</TD>
    <TD class="Year2017">8</TD>
    <TD class="Year2018">9</TD>
    <TD class="Year2018">10</TD>
  </TR>
  <TR>
    <TD>1</TD>
    <TD>text 1</TD>
    <TD>text 2</TD>
    <TD>text 3</TD>
    <TD>text 4</TD>
    <TD class="Year2016">5</TD>
    <TD class="Year2016">6</TD>
    <TD class="Year2017">7</TD>
    <TD class="Year2017">8</TD>
    <TD class="Year2018">9</TD>
    <TD class="Year2018">10</TD>
  </TR>
  <TR>
    <TD>1</TD>
    <TD>text 1</TD>
    <TD>text 2</TD>
    <TD>text 3</TD>
    <TD>text 4</TD>
    <TD class="Year2016">5</TD>
    <TD class="Year2016">6</TD>
    <TD class="Year2017">7</TD>
    <TD class="Year2017">8</TD>
    <TD class="Year2018">9</TD>
    <TD class="Year2018">10</TD>
  </TR>
  <TR>
    <TD>1</TD>
    <TD>text 1</TD>
    <TD>text 2</TD>
    <TD>text 3</TD>
    <TD>text 4</TD>
    <TD class="Year2016">5</TD>
    <TD class="Year2016">6</TD>
    <TD class="Year2017">7</TD>
    <TD class="Year2017">8</TD>
    <TD class="Year2018">9</TD>
    <TD class="Year2018">10</TD>
  </TR>
</TABLE>

回答1:

The CSS already has rules for odd and even childs.

https://www.w3.org/Style/Examples/007/evenodd.en.html

You can set an ID for the table and work your style from that, so you won't have to style each element of the table manually. Suppose you have a <table id="beta">, you can write your CSS like:

#beta tr:nth-child(even) {color:limegreen;}
#beta tr:nth-child(odd) {color:lime;}

This will result in your even rows styled limegreen and your odd ones, lime. The same can be applied to <td>'s and whatever. This is another example but using lists, from a SO answer.

回答2:

I think you can use <'col>, thank this you can color a whole column. i give you a link for the synthax : https://html.com/tags/col/

  • 发表于 2019-01-21 01:46
  • 阅读 ( 243 )
  • 分类：网络文章

你可能感兴趣的文章

随机文章

相关问题

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

赞助商

阿里云服务器优惠券 腾讯云三折优惠链接 找美团滴滴券就来券网

作家榜 »

  1. 小编 文章

最新公告

小编

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！

返回顶部
部分文章转自于网络，若有侵权请联系我们删除