没有显示表的边框

Question

我编写了以下代码（ES6）以在表中的JSON文件中显示一堆内容：

var tablesGlobal2 = 
[
  {"titleRow":[{"string":"Country","alignment":-1},{"string":"Hemisphere","alignment":2}],
  "contentMatrix":[[{"string":"USA","alignment":-1},{"string":"North","alignment":2}],[{"string":"Brazil","alignment":0},{"string":"South","alignment":0}]]},
  {"titleRow":[{"string":"Season","alignment":0},{"string":"Month","alignment":0}],
  "contentMatrix":[[{"string":"Spring","alignment":-1},{"string":"March","alignment":-1}],[{"string":"Spring","alignment":1},{"string":"April","alignment":-1}],[{"string":"Spring","alignment":0},{"string":"May","alignment":2}],[{"string":"Summer","alignment":2},{"string":"June","alignment":2}],[{"string":"Summer","alignment":0},{"string":"July","alignment":0}],[{"string":"Summer","alignment":1},{"string":"August","alignment":2}],[{"string":"Fall","alignment":0},{"string":"September","alignment":0}],[{"string":"Fall","alignment":-1},{"string":"October","alignment":-1}],[{"string":"Fall","alignment":1},{"string":"November","alignment":0}],[{"string":"Winter","alignment":-1},{"string":"December","alignment":2}],[{"string":"Winter","alignment":-1},{"string":"January","alignment":0}],[{"string":"Winter","alignment":2},{"string":"February","alignment":-1}]]}
];

class SampleApplication extends React.Component {
  constructor(props) {
    super(props);
    this.state = { tables: tablesGlobal2 };
  }
  ShowRowsOfATable(row) { 
    var rows = [];
    row.forEach(function(cell) {
      rows.push(<td> {JSON.stringify(cell.string)} </td> );
    }); 
    return ( {rows} );
  }
  ShowATable(table) { 
    var rows = [];
    var self = this;
    table.contentMatrix.forEach(function(row) {
      var goo = <tr> {self.ShowRowsOfATable(row)} </tr>;
      rows.push(goo);
    }); 
    return (<table> {rows} </table>);  
  } 

  ShowTables(tables) {
    var self = this;
    var rows = [];
    tables.forEach(function(table) {
      rows.push( self.ShowATable(table) );
    });  

    var tableRows = <div>{rows}</div>;
    return (
      <div>  
        {tableRows} 
      </div> 
      ); 
  }
  render() {
    var ts = this.ShowTables(this.state.tables);
    return ( <div> {ts} </div> );
  }
}

React.render(<SampleApplication />, document.body);

以下是示例输出：https://jsfiddle.net/danyaljj/0rb0uo8a/

我想在表格中添加规范。例如，当我将<table>更改为<table border="10">时，输出仍然不会更改。同样，当我将<td>更改为<td bgcolor="#FF0000">时。

知道我做错了吗？

Answer 1

您可以在此处找到所有表格属性点击here。 正如菲利克斯·克林＆＃34;边界＆＃34;被剥夺了;（

但你可以使用＆＃34; borderWidth＆＃34;和＆＃34; borderStyle＆＃34;

<table style={{"borderWidth":"1px", 'backgroundColor':"#aaaaaa", 'borderStyle':'solid'}}></table>