WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Making tables vir Div and css (3 posts)

  1. lasca
    Member
    Posted 1 year ago #

    Good day,

    I am trying to make a table using div and css only. My first table workd perfectly, My second table is not looking the way It should . I know it is something simple but after two hours I am still at a loss.

    This is the link to the page i am working on

    here is the html for both the tables

    <div class="divTable1">
    <div class="headRow">
    <div class="divCell" align="center"><p>Companies</p></div>
    <div  class="divCell" align="center"><p>EME</p></div>
    <div  class="divCell" align="center"><p>QSE</p></div>
    <div  class="divCell" align="center"><p>Generic</p></div>
    </div>
    <div class="divRow">
    <div class="divCell"><p>Turnover</p></div>
    <div class="divCell"><p> than R5 mil</p></div>
    <div class="divCell"><p>>R5 mil < than R35 mil</p></div>
    <div class="divCell"><p>> than R35 mil</p></div>
    </div>
    <div class="divRow">
    <div class="divCell"><p>Maks.points earned</p></div>
    <div class="divCell"><p>25</p></div>
    <div class="divCell"><p>25</p></div>
    <div class="divCell"><p>5</p></div>
    </div>
    <div class="divRow">
    <div class="divCell"><p>NPAT to be invested</p></div>
    <div class="divCell"><p>1%</p></div>
    <div class="divCell"><p>1%</p></div>
    <div class="divCell"><p>1%</p></div>
    </div>
    
    </div>
    
    <div id="txtparra2">
    <p>At the time of  rating, the rating agency will need to confirm the following supporting evidence.</p>
    </div>
    
    <div id="divTable2">
    <div class="headRow2">
    <div class="divCell2" align="center"><p>Area being validated </p></div>
    <div  class="divCell2" align="center"><p>Proof of payment</p></div>
    <div  class="divCell2" align="center"><p>Proof that 75% or more of beneficiaries are black</p></div>
    </div>
    <div class="divRow2">
    <div class="divCell2"><p>Supporting Evidence</p></div>
    <div class="divCell2"><p>Invoice From Intellikidz</p></div>
    <div class="divCell2"><p>Confirming letter from beneficiary school</p></div>
    </div>

    and this is the css code used

    .divTable1
        {
            display:  table;
            width:100%;
            border:1px solid  #666666;
            border-spacing:5px;
        }
    
        .divRow
        {
           display:table-row;
           width:auto;
    
        }
    
        .divCell
        {
            float:left;
            display:table-column;
            width:24.5%;
    	border:1px solid  #666666;
    	font-size-adjust:.35;
    
        }
    	txtparra2{
    		clear:left;
    		}
    
    .divTable2
        {
            display:  table;
            width:100%;
            border:1px solid  #666666;
            border-spacing:5px;
        }
    
        .divRow2
        {
           display:table-row;
           width:33.3%;
    
        }
    
        .divCell2
        {
            float:left;
            display:table-column;
            width:33.3%;
    	border:1px solid  #666666;
    	font-size-adjust:.35;
    
        }

    Any help would be appreciated

    Regards

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    please ask at a css forum like http://csscreator.com/forum

    this is a pure formatting question, and not specific to WordPress.

    for example, you are suddenly using a css id in the html code for the second table, but continue with a css class in style.css ...

  3. lasca
    Member
    Posted 1 year ago #

    Ok thx wil do!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags