一次填充多个td答案

【问题标题】：Filling multiple td for one th一次填充多个td
【发布时间】：2018-08-06 21:47:20
【问题描述】：

我需要制作一张包含问题答案的表格。我正在提出问题，我需要与该问题相关的多个答案。

主要问题是我无法实现答案跟随计数（数字和百分比）。我做了 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;
}

【问题讨论】：

你试过colspan吗？
不，但现在我看到了示例并且它正在工作。谢谢
继续并接受以下答案之一

标签： html css angular html-table

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

请解释你做了什么编辑答案，避免只用代码回答
感谢您提供此代码 sn-p，它可能会提供一些有限的短期帮助。一个正确的解释would greatly improve 其长期价值，通过展示为什么这是解决问题的好方法，并将使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。
这里使用 colspan="2" 因为它允许两个 td 并使表格宽度为 100%，这对响应目的很有用

【解决方案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>

【讨论】：