如何在reStructuredText中更改表格单元格的背景颜色?

5

如何在ReStructured Text (rst2html.py)中使用颜色或者如何插入HTML标签而不产生空白行?的指导下,我成功地在表格中设置了文本背景,代码如下:

.. role:: gbg

.. raw:: html

   <style>
      .gbg {background-color:#00ff00;} 
   </style>

+-------+----------------+-------+---------+-------+---------+
| UTC+1 | (d-s)          | UTC-6 | (zo)    | UTC-7 | (za)    |
+=======+================+=======+=========+=======+=========+
| 15:00 | :gbg:`avail`   |  8:00 |         |  7:00 |         |
+-------+                +-------+---------+-------+         +
| 15:30 |                |  8:30 |         |  7:30 |         |
+-------+----------------+-------+---------+-------+---------+

那样的话,“avail”这个单词的字符后面会有绿色背景,但是我怎么才能让整个单元格都有颜色而不是只有这些字符后面的部分有呢?
2个回答

6
用 JavaScript 来糊弄它:
.. role:: gbg

.. raw:: html

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script>
     $(document).ready(function() {
       $('.gbg').parent().addClass('gbg-parent');
     });
   </script>
   <style>
      .gbg-parent {background-color:#00ff00;}
   </style>

+-------+----------------+-------+---------+-------+---------+
| UTC+1 | (d-s)          | UTC-6 | (zo)    | UTC-7 | (za)    |
+=======+================+=======+=========+=======+=========+
| 15:00 | :gbg:`avail`   |  8:00 |         |  7:00 |         |
+-------+                +-------+---------+-------+         +
| 15:30 |                |  8:30 |         |  7:30 |         |
+-------+----------------+-------+---------+-------+---------+

2

REsT:

.. table::
   :class: rows

   +-------+----------------+-------+---------+-------+---------+
   | UTC+1 | (d-s)          | UTC-6 | (zo)    | UTC-7 | (za)    |
   +=======+================+=======+=========+=======+=========+
   | 15:00 | avail          |  8:00 |         |  7:00 |         |
   +-------+                +-------+---------+-------+         +
   | 15:30 |                |  8:30 |         |  7:30 |         |
   +-------+----------------+-------+---------+-------+---------+

CSS:
table.rows th {
    background-color: #ede;
    border-style: solid solid solid solid;
    border-width: 0px 0px 0px 0px;
    border-color: #AAAAAA;
    text-align: center;
}
table.rows td {
    border-style: solid solid solid solid;
    border-width: 0px 0px 0px 0px;
    border-color: #AAAAAA;
}

table.rows tr {
    border-style: solid solid solid solid;
    border-width: 0px 0px 0px 0px;
    border-color: #AAAAAA;
}

table.rows tr:nth-child(even) {
    background-color: #F3F3FF;
}
table.rows tr:nth-child(odd) {
    background-color: #FFFFEE;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接