一次填充多个td

Question

我需要在桌子上回答问题。 我正在提问，我需要与该问题相关的多个答案。

主要问题是我无法实现答案跟随计数（数量和百分比）。 我制作了Codepen，以便您可以看到我到那里去了。 我将使用* ngFor在Angular2上使用JSON填充此表。

<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

您应该在table的第一行中使用colspan ，并在第二行中使用th而不是td因为它是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

我在这里分享了JSFIDDLE的链接

我编辑了您的代码，我认为这对您很有用

<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>

在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

您可以在th标签上使用colspan属性：

<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>