Question

我试图找出为什么我的标题和正文行不同步。我使用语义ui作为css。是因为我的身体行是在不同的组件中呈现的吗？我尝试将它们全部移动到1并且它没有任何区别。

<table className="ui celled table" border="1">
     <thead>
      <tr>
        <th >Status</th>
        <th >Service Date of Visit</th>
        <th >Claim ID</th>
        <th >Insurance Plan</th>
      </tr>
    </thead>


        <tbody>
         {this.state.claims.map ( claim => <ClaimRow claim= { claim } /> ) }
    </tbody>

并在组件内部。

const ClaimRow = ( {claim} =this.props ) =>  (


    <Form.Field>
      <tr >
         <td >
              <input type="radio" name={claim._id} label="That Was Me"  value="valid" checked={claim.status === 'valid'} />
               Valid? <br />
              <input type="radio" name={claim._id} label="Looks Like Fraud" value="fraud" checked={claim.status === 'fraud'} />
              Fraud? <br />
              <input type="radio" name={claim._id} label="Looks Like Fraud"  value="notselected" checked={!claim.status && "defaultchecked"} />
              Not Yet Sure
          </td>
        <td >  {claim.claimDate}  {claim.status}</td>
        <td >  {claim.claimID}  </td>
        <td >  {claim.carrier}  </td>
     </tr>
   </Form.Field>

);

ClaimRow.propTypes = {
  claim: PropTypes.string.isRequired
};

export default

和表格页脚

        <tfoot className="full-width">
      <tr>
        <th colspan="4">
          <div className="ui small button">
            Approve
          </div>
          <div className="ui small button">
            Approve All
          </div>
          <div className="ui right floated button" >
              Next
                  <i class="right arrow icon"> </i>
          </div>
          <div className="ui right floated button" >
                  <i class="left arrow icon"></i>
             Prev
          </div>
        </th>
      </tr>
    </tfoot>
  </table>

Answer 1

行应返回顶级<tr>，而不是<Form.Field>。

Answer 2

对我来说，添加此类是可行的。

.ReactTable .rt-tbody .rt-td{
    margin-left: 0;
}

React表错误地将表头列与表行列

2 个答案: