React.js의 스타일 테이블

Question

React에서 테이블 렌더링에 문제가 있습니다. 내 두 가지 주요 문제는 내가 포함하고있는 버튼이 해당 섹션 내에서 스타일이 올바르지 않다는 것입니다 (나는 div에서 가운데에 맞춰야하지만 테이블에서 벗어나기를 원합니다). 그리고 버튼이있는 영역이나 테이블이있는 영역에서 테이블 경계가 잘립니다. 빈 테이블 헤더입니다. 누구든지 내가 뭘 잘못하고 있는지에 대한 생각을 갖고 있니?

는 현재처럼 보이는 무엇 :

관련 코드 : MyTable.js :

export default class MyTable extends Component { 
constructor(props) { 
    super(props); 
} 

render() { 
    var rows = []; 
    this.props.items.forEach(function(item) { 
     if (i % 2 === 0) { 
      rows.push(<MyTableRow item={item} key={item.name} />); 
    }.bind(this)); 

    return (
     <table className={styles.moduleSection}> 
      <thead> 
       <tr> 
        <th {‘Name’} </th> 
        <th className={styles.status}>{'Potential status'}</th> 
       </tr> 
      </thead> 
      <tbody>{rows}</tbody> 
     </table> 
    ); 
} 
} 

MyTable.css :

.moduleSection { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-collapse: collapse; 
    border-radius: 6px; 
    width: 100%; 
} 

.status { 
    height: 35px; 
    padding: 0 20px; 
    text-align: right; 
    width: 105px; 
} 

MyTableRow.js :

export default class MyTableRow extends Component { 
constructor(props) { 
    super(props); 
} 

render() { 
    const statusMap = { 
     1: 'Potential', 
     2: 'Unpotential', 
    }; 

    return (
     <tr className={styles.tr}> 
      <td className={styles.td}>{this.props.conversionTag.name}</td> 
      <td className={styles.status}>{item.status}</td> 
      <td className={styles.editButton}> <Button 
        text={‘Details'} 
       /> 
      </td> 
     </tr> 
    ); 
} 
} 

MyTableRow.css는 :

.td { 
    font-weight: 500; 
    padding: 0 20px; 
} 

.status { 
    border: 1px solid #e7e7e7; 
    color: #ff0000; 
    font-size: 14px; 
    font-weight: 500; 
    padding: 0 20px; 
    text-align: right; 
} 

.tr { 
    border-bottom: 1px solid #e7e7e7; 
    font-size: 14px; 
} 

.editButtonText { 
    padding: 7px 10px; 
} 

.editButton { 
    background: #fff !important; 
    border-color: #c7c7c7; 
    border-radius: 4px; 
    box-shadow: none; 
    color: #333 !important; 
    font-size: 14px; 
    float: right; 
    line-height: 16px; 
    padding: 7px 10px; 
    width: 48px; 
} 

어떤 도움을 주시면 감사하겠습니다! 감사!

Answer 1

몇 가지 :

• 당신은 당신의 MyTableRow에 헤더 두 th의 만 세 td의 정의된다.

• .editButton에는 float: right 세트가 있습니다. 센터링 효과로 text-align: center을 사용해야한다고 생각합니다. 또한, 필요하지 않으면 패딩과 너비를 제거하십시오.