2017-02-12 10 views
1

JsfiddleのサンプルReactアプリケーションでは、ブートストラップテーブルが正しく表示されません。はい、JSXではclassの代わりにclassNameを使用しています。コードで何が間違っているのかをご提案ください。コードへブートストラップテーブルがJsfiddleで正しく表示されないReact code

リンク:https://jsfiddle.net/hgondela/teag0sqf/5/

var HelloTable = React.createClass({ 
    render: function() { 
    return ( 
     <div> 
      <div className='jumbotron text-center'>Bootstrap table in React JSX </div> 
      <table className="table table-striped table-bordered"> 
       <tr> 
       <th>Firstname</th> 
       <th>Lastname</th> 
       <th>Age</th> 
       </tr> 
       <tr> 
       <td>Jill</td> 
       <td>Smith</td> 
       <td>50</td> 
       </tr> 
       <tr> 
       <td>Eve</td> 
       <td>Jackson</td> 
       <td>94</td> 
       </tr> 
      </table>  
     </div> 
    ) 
    }  
}) 

ReactDOM.render(<HelloTable name="World" />, document.getElementById('container')); 

答えて

1

私は私のブラウザでjsfiddleの要素を検査し、ブラウザが自動的にブートストラップは、スタイルに使用することを包むテーブル内<tbody>要素を挿入することを発見しました。だから私は<tbody>を追加しました:

<table> 
    <tbody> 
    // table stuff 
    </tbody> 
</table> 

、今テーブルは偉大なりますhttps://jsfiddle.net/teag0sqf/6/

+0

それは働きました。ありがとう。 しかし、なぜブラウザでJSXコードにが自動的に追加されなかったのか知っていますか? –

関連する問題