学员问题：桌子坏了。如何使用HTML和CSS在表上设置总计字段

我正在SharePoint框架React/TypeScript中使用JSX创建表单。 我正在尝试创建一个与上面其他行的宽度相匹配的total字段。但是我不想在total字段的左边有一个字段，除了标签上写着total之外。例如：

我已尝试应用内联CSS：

<th style={{width:'100%'}}></th>
<th style={{wdith:'40px'}}></th>

只有在total列左侧包含一个textfield时，此选项才有效。以下是此表中的几行，以帮助解释：

<table className={styles.table} >

           <tr>
         <th>{''}</th>

           <th style={{width:'100%'}}>{' '}</th>
            <th style={{width:'40px'}}>% Time</th>

              </tr>

              <tr>1
               <td><TextField
               name="DutResp1"
               value={this.state.DutResp1}
               onChange={this.handleChange}
                 />
               </td>
               <td ><TextField 
                name="DutRespTime1"
                value={this.state.DutRespTime1}
                onChange={this.handleChange}
                />
                </td>

               </tr>
              <tr>2
              <td><TextField
               name="DutResp2"
               value={this.state.DutResp2}
               onChange={this.handleChange}
               />
              </td>
              <td ><TextField
              name="DutRespTime2"
               value={this.state.DutRespTime2}
                onChange={this.handleChange}
                 />
               </td>

              </tr>

               { <tr>3
               <td><TextField
                name="DutResp5"
               value={this.state.DutResp5}
                onChange={this.handleChange}
                />
               </td>
               <td ><TextField
                  name="DutRespTime5"
                 value={this.state.DutRespTime5}
                 onChange={this.handleChange}
                 />
               </td>

               </tr> }

                {<tr >
                 <td >1</td> //I DON'T WANT THIS 1 OR THE FIELD BELOW, I WANT IT TO SAY TOTALS!!!
                 <td ><TextField 
                  name="DutRespTimeTotal"
                  value={this.state.DutRespTimeTotal}
                   onChange={this.handleChange}
                   hidden={true}
                 />
                 </td>
                 <td ><TextField //THIS IS THE TOTALS FIELD, I WANT THIS!
                  name="DutRespTimeTotal"
                  value={this.state.DutRespTimeTotal}
                  onChange={this.handleChange}
                 />
              </td>

           </tr> }

         </table>

请注意，分配给className={styles.table}的CSS只是设置宽度：100%

我还没有试过所有的方法，但我几乎要放弃了！请帮忙

C

每行中的列数必须相同 如果要在表格中显示单词Totals，则需要将其显示在单元格中 可以使用通过colspan属性访问的colspan属性使单元格跨越多列 因此：

---

我在上面使用了昆汀的答案栏span，但我使用了页脚 使用以下CSS：

.total{
    text-align: right;
    column-span: 2;

  }

但我也对表格标题使用了内联CSS，如下所示：

    <th style={{width: '90%'}}>{' '}</th>
    <th style={{width:'40px'}}>% Time</th>

这当然不容易理解，而且需要大量的实验

    <th style={{width: '90%'}}>{' '}</th>
    <th style={{width:'40px'}}>% Time</th>