显示表格-CSS,使成对的表格单元格出现在新行上



我正在尝试构建一个答案比较页面,用户可以在其中比较智力竞赛游戏的答案。表中的问题一直在一行中显示所有答案集,这导致了集群显示。如果需要的话,我希望表格单元格进行调整并从新行开始——这里是JSFiddleCSS:

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

更新的Fiddle

或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;
}

另一个更新

最新更新