Filling multiple td for one th - html

Question

I need to make a table with answers to a question. I am putting questions in th and I need multiple answers related to that question.
The main problem is that I can not achieve that answers follow count(number and percents). I made
Codepen so that you can see what I get there. I will be filling this tables with JSON on Angular2 with *ngFor.
<div class="table-wrapper" id='table'>
<table>
<tr>
<th>Whats your gender?</th>
<th>What's your age?</th>
<th>How often do you train?</th>
</tr>
<tr>
<td>
<span>Female</span>
<span>Male</span>
</td>
<td class='flex'>
<span>15-24</span>
<span>25-34</span>
</td>
<td>
<span>Less than one a month</span>
<span>A few times a month</span>
</td>
</tr>
<tr>
<td>
<span>
573
</span>
<span>
299
</span>
</td>
<td>
<span>20%</span>
<span>68%</span>
</td>
<td>
<span>5%</span>
<span>3%</span>
</td>
</tr>
<tr>
<td>
<span>
66%
</span>
<span>
34%
</span>
</td>
<td>
<span>173</span>
<span>391</span>
</td>
<td>
<span>173</span>
<span>391</span>
</td>
</tr>
</table>
</div>
css
.table-wrapper {
width: 850px;
overflow: scroll;
}
.flex {
display: flex;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
min-width: 1000px;
}
span {
padding-right: 15px;
}
td, th {
text-align: left;
padding: 8px;
width; 40px;
}
td {
max-height: 100%;
}
tr:nth-child(even) {
background-color: #dddddd;
}

Answer 1

You should use colspan on the first line of your table and also make your second line with th instead of td since it's a second line of header.
.table-wrapper {
width: 850px;
overflow: scroll;
}
.flex {
display: flex;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
min-width: 1000px;
}
span {
padding-right: 15px;
}
td, th {
text-align: left;
padding: 8px;
width; 40px;
}
td {
max-height: 100%;
}
tr:nth-child(even) {
background-color: #dddddd;
}
::-webkit-scrollbar {
width: 1px;
border-radius: 2px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #e0e0e0;
height: 2px;
}
::-webkit-scrollbar:horizontal{
height: 15px;
border-radius: 2px;
}
::-webkit-scrollbar-track:horizontal {
background: #fff;
height: 2px;
}
::-webkit-scrollbar-thumb:horizontal {
height: 2px;
}
<div class="table-wrapper" id='table'>
<table>
<tr>
<th colspan="2">Whats your gender?</th>
<th colspan="2">What's your age?</th>
<th colspan="2">How often do you train?</th>
</tr>
<tr>
<th>
<span>Female</span>
</th>
<th>
<span>Male</span>
</th>
<th class='flex'>
<span>15-24</span>
</th>
<th>
<span>25-34</span>
</th>
<th>
<span>Less than one a month</span>
</th>
<th>
<span>A few times a month</span>
</th>
</tr>
<tr>
<td>
<span>
573
</span>
</td>
<td>
<span>
299
</span>
</td>
<td>
<span>20%</span>
</td>
<td>
<span>68%</span>
</td>
<td>
<span>5%</span>
</td>
<td>
<span>3%</span>
</td>
</tr>
<tr>
<td>
<span>
66%
</span>
</td>
<td>
<span>
34%
</span>
</td>
<td>
<span>173</span>
</td>
<td>
<span>391</span>
</td>
<td>
<span>173</span>
</td>
<td>
<span>391</span>
</td>
</tr>
</table>
</div>

Answer 2

here i am sharing the link of JSFIDDLE
i edited your code, i think it is useful to you
<table>
<tr>
<th colspan=2>Whats your gender?</th>
<th colspan=2>What's your age?</th>
<th colspan=2>How often do you train?</th>
</tr>
<tr>
<td>Female</td>
<td>Male</td>
<td>15-24</td>
<td>25-34</td>
<td>Less than one a month</td>
<td>A few times a month</td>
</tr>
<tr>
<td>
573
</td>
<td>
299
</td>
<td>20%</td>
<td>68%</td>
<td>5%</td>
<td>3%</td>
</tr>
<tr>
<td>
66%
</td>
<td>
34%
</td>
<td>173</td>
<td>391</td>
<td>173</td>
<td>391</td>
</tr>
</table>
</div>
in css
.table-wrapper {
width:100%;
overflow: scroll;
}
th
{
text-align:center;
}
.flex {
display: flex;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
min-width: 1000px;
}
span {
padding-right: 15px;
}
td, th {
padding: 8px;
width; 40px;
}
td {
max-height: 100%;
}
tr:nth-child(even) {
background-color: #dddddd;
}
https://jsfiddle.net/p9su2je6/6/

Answer 3

You can use the colspan attribute on the th tags:
<div class="table-wrapper" id='table'><table>
<tr>
<th colspan="2">Whats your gender?</th>
<th colspan="2">What's your age?</th>
<th colspan="2">How often do you train?</th>
</tr>
<tr>
<td><span>Female</span></td>
<td><span>Male</span></td>
<td><span>15-24</span></td>
<td><span>25-34</span></td>
<td><span>Less than one a month</span></td>
<td><span>A few times a month</span></td>
</tr>
<tr>
<td><span>573</span></td>
<td><span>299</span></td>
<td><span>20%</span></td>
<td><span>68%</span></td>
<td><span>5%</span></td>
<td><span>3%</span></td>
</tr>
<tr>
<td><span>66%</span></td>
<td><span>34%</span></td>
<td><span>173</span></td>
<td><span>391</span></td>
<td><span>173</span></td>
<td><span>391</span></td>
</tr>