设置HTML和CSS中表格的合计字段。

huangapple go评论71阅读模式
英文:

Learner Question: Table woe. How to set a totals field on a table using HTML and CSS

问题

我在SharePoint Framework(React/TypeScript)中使用JSX创建表单。我尝试创建一个总计字段,其宽度与上面的其他行相匹配。但是我不想在总计字段左边有一个字段,除了一个标签写着“总计”。例如:
设置HTML和CSS中表格的合计字段。

我尝试应用内联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:
设置HTML和CSS中表格的合计字段。

I've tried applying inline CSS:

&lt;th style={{width:&#39;100%&#39;}}&gt;&lt;/th&gt;
&lt;th style={{wdith:&#39;40px&#39;}}&gt;&lt;/th&gt;

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:

&lt;table className={styles.table} &gt;
&lt;tr&gt;
&lt;th&gt;{&#39;&#39;}&lt;/th&gt;
&lt;th style={{width:&#39;100%&#39;}}&gt;{&#39; &#39;}&lt;/th&gt;
&lt;th style={{width:&#39;40px&#39;}}&gt;% Time&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;1
&lt;td&gt;&lt;TextField
name=&quot;DutResp1&quot;
value={this.state.DutResp1}
onChange={this.handleChange}
/&gt;
&lt;/td&gt;
&lt;td &gt;&lt;TextField 
name=&quot;DutRespTime1&quot;
value={this.state.DutRespTime1}
onChange={this.handleChange}
/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;2
&lt;td&gt;&lt;TextField
name=&quot;DutResp2&quot;
value={this.state.DutResp2}
onChange={this.handleChange}
/&gt;
&lt;/td&gt;
&lt;td &gt;&lt;TextField
name=&quot;DutRespTime2&quot;
value={this.state.DutRespTime2}
onChange={this.handleChange}
/&gt;
&lt;/td&gt;
&lt;/tr&gt;
{ &lt;tr&gt;3
&lt;td&gt;&lt;TextField
name=&quot;DutResp5&quot;
value={this.state.DutResp5}
onChange={this.handleChange}
/&gt;
&lt;/td&gt;
&lt;td &gt;&lt;TextField
name=&quot;DutRespTime5&quot;
value={this.state.DutRespTime5}
onChange={this.handleChange}
/&gt;
&lt;/td&gt;
&lt;/tr&gt; }
{&lt;tr &gt;
&lt;td &gt;1&lt;/td&gt; //I DON&#39;T WANT THIS 1 OR THE FIELD BELOW, I WANT IT TO SAY TOTALS!!!
&lt;td &gt;&lt;TextField 
name=&quot;DutRespTimeTotal&quot;
value={this.state.DutRespTimeTotal}
onChange={this.handleChange}
hidden={true}
/&gt;
&lt;/td&gt;
&lt;td &gt;&lt;TextField //THIS IS THE TOTALS FIELD, I WANT THIS!
name=&quot;DutRespTimeTotal&quot;
value={this.state.DutRespTimeTotal}
onChange={this.handleChange}
/&gt;
&lt;/td&gt;
&lt;/tr&gt; }
&lt;/table&gt;

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 colspan attribute (accessed via the colSpan property) to make a cell span multiple columns

So:

&lt;tr&gt;
&lt;th colSpan=&quot;2&quot;&gt; Totals &lt;/th&gt;
&lt;td&gt; &lt;TextField /&gt; &lt;/td&gt;
&lt;/tr&gt;

答案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 &lt;tfoot&gt;
with the following CSS:

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

But I also used inline CSS for the table headers as such:

    &lt;th style={{width: &#39;90%&#39;}}&gt;{&#39; &#39;}&lt;/th&gt;
&lt;th style={{width:&#39;40px&#39;}}&gt;% Time&lt;/th&gt;

This was certainly not easy to figure out and took a lot of experimentation.

huangapple
  • 本文由 发表于 2020年1月6日 18:47:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/59610711.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定