CODEWITHSUNDEEP
htmlcss
kiria67
kiria67

Reputation: 19

Display table - CSS, make pairs of table cells appear on new line

I'm trying to build an answer comparison page where users can compare the answers from a quiz game. The problem I have the table keeps showing all the answer sets on one line which results in clustered display. I would want the table cells to adjust and start on a new line if necessary - here is JSFiddle CSS: 

#scores {
    display: table;
    margin: 0 auto;
    border: 1px black solid;
}
/* The answers handling */
#userC, #scoreC1, #scoreC2, #scoreC3, #scoreC4, #scoreC5, #scoreC6, #scoreC7   {
    display: table-cell;
    margin-right: 1.4em;
    border: 1px black solid;
}
/* The answers handling - usernames and scores*/ 
#user1, #user2, .score1, .score2 {
    margin-right: 1.4em;
    border: 1px black solid;
}

HTML:

<div id="scores">
    <div id="userC">
        <div id="user1">Player1</div><div id="user2">Player2</div>
    </div>
    <div class= "inlineS" id="scoreC1">
        <div class="score1">Video games</div><div class="score2">Video games</div>
    </div>

    <div class= "inlineS" id="scoreC2">
        <div class="score1">Winter</div><div class="score2">Summer</div>
    </div>

    <div class= "inlineS" id="scoreC3">
        <div class="score1">Ice cream</div><div class="score2">Ice cream</div>
    </div>

    <div class= "inlineS" id="scoreC4">
        <div class="score1">Night owl</div><div class="score2">Night owl</div>
    </div>

    <div class= "inlineS" id="scoreC5">
        <div class="score1">Go out</div><div class="score2">Stay at home</div>
    </div>

    <div class= "inlineS" id="scoreC6">
        <div class="score1">TV series</div><div class="score2">Movies</div>
    </div>

    <div class= "inlineS" id="scoreC7">
        <div class="score1">Meat</div><div class="score2">Veggie</div>
    </div>

</div>

Upvotes: 1

Views: 107

Answers (1)

Tuhin
Tuhin

Reputation: 3373

#user1, #user2, .score1, .score2 {
    display: table-row; <-------
    margin-right: 1.4em;
    border: 1px black solid;
}

Updated Fiddle

or Veritcally

/* The answers handling */
#userC, #scoreC1, #scoreC2, #scoreC3, #scoreC4, #scoreC5, #scoreC6, #scoreC7   {
    display: table-row;
    margin-right: 1.4em;
    border: 1px black solid;
}
/* The answers handling - usernames and scores*/ 
#user1, #user2, .score1, .score2 {
    display: table-cell;
    margin-right: 1.4em;
    border: 1px black solid;
}

Another Update

Upvotes: 2

Related Questions