Pfthb

• 
  

  How to make 2 Rows and 8 Column Table in CSS?
  Note: The Table must have strict and stick position,

  
  
  

  I make 2 Rows and 8 Colums Table and
  i added Text module to the every Column and then i added HTML Code to
  the every Text module to take controll on the Behaviar of the text
  module and to convert the text module into editable HTML column with
  any drag and drop website builder plugin. So i get success in this
  and now the Problem is that all Columns are showing in Rows i mean now
  i have 8 rows and in every Row i have 1 Column. This Happened when i
  added the HTML code to every Text Module. This is the Short html
  that i added to every text Module to transform the text module in an
  editable column.

  
  

HTML > The same code is added to all Text Modules... Total Text modules are 8

Text Mudule 1

 <div id="main-section2"></div>
 <div class="bg-wrapper-cover">
 <div class="row2">
 <div class="col-text-0"></div>
 <div class="bg-wrapper-cover-background"></div>
</div>

Text Module 2

 <div id="main-section2"></div>
 <div class="bg-wrapper-cover">
 <div class="row2">
 <div class="col-text-0"></div>
 <div class="bg-wrapper-cover-background"></div>
</div>

CSS:

#main-section2
.bg-wrapper-cover 
 width:500px;
 position:relative;

.row2 
 display: flex;
 width:100%;
 margin:0px;




.col-text-0 
 padding:0 14px;
 border:1px solid black;
 display:inline-block;
 width:calc(25% - 30px);
 height:50px;
 background:pink;
 z-index:10;


.bg-wrapper-cover-background 
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index :0;
 transition: background 3s;


.bg-wrapper-cover:hover .col-text-0 
 background:none;

.bg-wrapper-cover:hover .col-text-0:hover 
 background:red;

.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(1):hover ~ .bg-wrapper-cover-background 
 background:blue;
 z-index:0;


.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(3):hover ~ .bg-wrapper-cover-background 
 background:darkgray;
 z-index:0;

.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(5):hover ~ .bg-wrapper-cover-background 
 background:yellow;
 z-index:0;

.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(7):hover ~ .bg-wrapper-cover-background 
 background:orange;
 z-index:0;

.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(1):hover ~ .bg-wrapper-cover-background 
 background:gray;
 z-index:0;


.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(3):hover ~ .bg-wrapper-cover-background 
 background:black;
 z-index:0;

.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(5):hover ~ .bg-wrapper-cover-background 
 background:green;
 z-index:0;

.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(7):hover ~ .bg-wrapper-cover-background 
 background:lightblue;
 z-index:0;

SNAPSHOT

why not just an unordered list with the following style:

li:nth-child(2n) 
 margin-bottom: 10px;