【问题标题】:Changing the restrictions from the last table th更改最后一张表的限制
【发布时间】:2016-02-16 15:07:40
【问题描述】:

我有下表

<table>
  <TableHeader className="execution-head"/>
    <tbody>
      <tr className={this.props.className} onClick={this.handleClick}>
        <th>{this.props.execution_id}</th>
        <th>{this.props.launch_time}</th>
        // more th's here
      </tr>
      <tr className={this.props.className} onClick={this.handleClick}>
        <th>{this.props.execution_id}</th>
        <th>{this.props.launch_time}</th>
        // more th's here
      </tr>
      <tr>
        <th>+</th>
      </tr>
    </tbody>
</table>

输出:

<table data-reactid=".1">
 <thead data-reactid=".1.0">
  <tr class="execution-head" data-reactid=".1.0.0">
     <th data-reactid=".1.0.0.0">ID</th>
     <th data-reactid=".1.0.0.1">Launch Time</th>
     <th data-reactid=".1.0.0.5">Execution Time</th>
  </tr>
 </thead>
 <tbody data-reactid=".1.1">
  <tr class="execution-row" data-reactid=".1.1.0:$4x324">
     <th data-reactid=".1.1.0:$4x324.0">4x324</th>
     <th data-reactid=".1.1.0:$4x324.1">11.11.15 13:30</th>
     <th data-reactid=".1.1.0:$4x324.5">2</th>
  </tr>
  <tr class="execution-row" data-reactid=".1.1.0:$4823748">
     <th data-reactid=".1.1.0:$4823748.0">4823748</th>
     <th data-reactid=".1.1.0:$4823748.1">13.11.15 13:30:25</th>
     <th data-reactid=".1.1.0:$4823748.5">34</th>
  <tr class="table-plus" data-reactid=".1.1.1">
     <th data-reactid=".1.1.1.0">+</th>
  </tr>
 </tbody>
</table>

我想让最后一个 tr 元素占据表格的整个宽度,但从我尝试过的所有内容来看,它总是出错。

P.S 如果你想知道,这是用 react 写的

【问题讨论】:

  • 而不是发布反应代码。你能发布什么作为最终产品出来,即 html 代码
  • 编辑并添加了即将发布的内容

标签: html css reactjs html-table


【解决方案1】:

计算变量中ths 的数量,比如col_cnt 然后在最后一个tr 你可以这样写:

<tr>
 <th colspan="{col_cnt}">+</th>
</tr>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-10
    • 1970-01-01
    • 2011-12-21
    • 2022-06-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多