不顯示表格邊框

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

您可以在此處找到所有表屬性 單擊此處。 正如 Felix Kling 所說，“邊界”已被棄用；（

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

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