Reactjs - 表格行上的不同列布局會影響其他表格行

Question

我遇到此問題，如果將不同的列布局應用於React中的不同行，它會混淆其他行的列布局。例如，SpecialRows是我想要顯示的表中的行。 SpecialBar是存在於包含過濾，搜索等其他內容的表格上方的一個條。 SpecialBar與SpecialRow有不同的列布局，但是當我這樣做時，SpecialRow的列現在模仿SpecialBar的列，並將所有數據壓扁到右側。

任何想法可能發生什麼？

class Table1 extends React.Component { 
    <Table> 
     <tbody> 
      <SpecialBar {...this.props}/> 
      {this.props.moreRows.map((row) => 
       <SpecialRow {...this.props} /> 
      )} 
     </tbody> 
    </Table> 
} 

class SpecialBar extends React.Component { 
    render() { 
     return (
      <tr> 
       <td className='col-md-1'>Text A</td> 
       <td className='col-md-10>Text B</td> 
       <td className='col-md-1>Text C</td> 
      </tr> 
     ); 
    } 
} 

class SpecialRow extends React.Component { 
    render() { 
     return (
      <td className='col-md-2'>Stuff</td> 
      <td className='col-md-2'>Stuff</td> 
      <td className='col-md-2'>Stuff</td> 
      <td className='col-md-2'>Stuff</td> 
      <td className='col-md-1'>Stuff</td> 
      <td className='col-md-1'>Stuff</td> 
      <td className='col-md-1'>Stuff</td> 
      <td className='col-md-1'>Stuff</td> 
     ); 
    } 
} 

Answer 1

任何想法可能發生什麼？

發生了什麼事情是，第一行第二個單元格的寬度（col-md-10）是設置以下行中所有第二個單元格的寬度。這就是表格的工作原理。

您可以通過給該col-md-10單元格colspan="10"解決該問題。對具有col-md-2的電池做同樣的處理，給他們colspan="2"。