javascript - 不显示表格边框

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 。 正如 Felix Kling 所说，“边界”已被弃用；(

但是您可以使用“borderWidth”和“borderStyle”

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