英文:
Learner Question: Table woe. How to set a totals field on a table using HTML and CSS
问题
我在SharePoint Framework（React/TypeScript）中使用JSX创建表单。我尝试创建一个总计字段，其宽度与上面的其他行相匹配。但是我不想在总计字段左边有一个字段，除了一个标签写着“总计”。例如：
我尝试应用内联CSS：
<th style={{width: '100%'}}></th>
<th style={{width: '40px'}}></th>
这只有在我在总计列左边包括一个文本字段时才有效。为了帮助说明，以下是表格中的几行：
<table className={styles.table}>
<tr>
<th>{''}</th>
<th style={{width: '100%'}}>{' '}</th>
<th style={{width: '40px'}}>% Time</th>
</tr>
<tr>
<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>
<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>
<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> //我不想要这个1或下面的字段，我想要它说总计！！！
<td><TextField
name="DutRespTimeTotal"
value={this.state.DutRespTimeTotal}
onChange={this.handleChange}
hidden={true}
/></td>
<td><TextField //这是总计字段，我想要这个！
name="DutRespTimeTotal"
value={this.state.DutRespTimeTotal}
onChange={this.handleChange}
/></td>
</tr>}
</table>
请注意，分配给className={styles.table}的CSS仅设置了width: 100%。
我还没有尝试所有可能的方法，但我快要放弃了！请帮助。
英文:
I'm using JSX within a SharePoint Framework (React/TypeScript) to create a form.
I'm attempting to create a total field that matches the width of the other rows above it. But I don't want a field to the left of the total field apart from a label saying total. For example:
I've tried applying inline CSS:
<th style={{width:'100%'}}></th>
<th style={{wdith:'40px'}}></th>
This works only if I include a textfield to the left of the total column. To help explain here are a few rows from this table:
<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>
Please note that the CSS assigned to the className={styles.table} is just setting the width:100%.
I haven't tried everything but I'm close to giving up! Any help please.
C
答案1
得分: 1
- 每一行必须拥有相同数量的列
- 如果你想要在表格中显示单词"Totals"，它需要位于一个单元格内
- 你可以使用
colspan属性（通过colSpan属性访问）来让一个单元格跨越多列
所以：
<tr>
<th colspan="2"> Totals </th>
<td> <TextField /> </td>
</tr>
英文:
- You have to have the same number of columns in each row
- If you want the word "Totals" to be displayed in a table then it neeeds to be in a cell
- You can use the
colspanattribute (accessed via thecolSpanproperty) to make a cell span multiple columns
So:
<tr>
<th colSpan="2"> Totals </th>
<td> <TextField /> </td>
</tr>
答案2
得分: 0
我使用了Quentin的回答（column-span）上面的方法，但我还使用了一个<tfoot>标签，并使用了以下CSS：
.total {
text-align: right;
column-span: 2;
}
但我也在表头中使用了内联CSS，如下所示：
<th style={{width: '90%'}}>{' '}</th>
<th style={{width: '40px'}}>% 时间</th>
这确实不容易弄清楚，需要进行大量的实验。
英文:
I used Quentin's answer (column-span) above, but I used a footer <tfoot>
with the following CSS:
.total{
text-align: right;
column-span: 2;
}
But I also used inline CSS for the table headers as such:
<th style={{width: '90%'}}>{' '}</th>
<th style={{width:'40px'}}>% Time</th>
This was certainly not easy to figure out and took a lot of experimentation.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论