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"을줍니다.