表中的CSS表

Question

所以，经过数小时的挣扎，我决定寻求帮助。

为了更好地解释，我添加了一个有三个数字的图像。 正如您在图2和图3中看到的那样，这是我想要实现的格式。我添加了图1来展示我背后的逻辑。

这是我尝试过的CSS失败。

.red{width:100%;display:table;}
.redrow {display:table-row; width:100%;}
.firstgreencell{width:70%; display:table-cell;}
.yellowtable{width:100%; display:table;}
.yellowrow{width:100%; display:table-row;}
.yellowfirst{width:30%; display:table-cell;}
.yellowsecond{width:70%; display:table-cell;}
.ysrow{display:table-row;}
.ysrowtop{display:table-column; height:50%;}
.ysrowbottom{display:table-column; height:50%;)
.secondgreencell{width:30%; display:table-cell;}

这是HTML：

<div class="red"> table(1st) (outer most table)
     <div class="redrow">   table-row (which includes two green cells)   
          <div class="firstgreencell"> table-cell (first green cell on the left)
            <div class="yellowtable">  table(2nd) (inner yellow table)
               <div class="yellowrow"> table-row (includes inner yellow cells)
                  <div class="yellowfirst"> Content X: table-cell  (left yellow cell that has "Content X")</div>                                
                  <div class="yellowsecond"> table-cell  (right yellow cell)
                      <div class="ysrow"> table-row (includes two right cells)
                         <div class="ysrowtop">  Content Y-Top: table-column (includes "Content Y-top) </div>   
                         <div class="ysrowbottom"> Content Y-bottom: table-column(includes "Content Y-bottom)</div> 
                      </div>
                  </div>    
              </div>    
           </div>   
        </div>                      
       <div class="secondgreencell">Content-Z: far right green cell</div>   
     </div>
  </div>

有关如何实现此表格式的任何建议吗？

谢谢！