Форматирование таблицы React, которая получает данные из файла JSON

Question

В настоящее время я работаю над проектом по изучению React и пытаюсь отобразить таблицу, в которой значения полей взяты из файла .json.Я пытаюсь отформатировать таблицу так, чтобы была строка, разделяющая каждую строку и каждый столбец, но все, что я смог получить, это рамку вокруг каждой отдельной записи таблицы.Вот код для моего класса:

import React, { Component } from 'react'
import table from '../styles/table.css'
import PostData from '../data/week1scoring.json'

class PostList extends Component {
  render() {
    return (
      <div>
        <table style={{"borderWidth":"1px", u'borderStyle':'solid'}}>
          <tr>
                <th>Team</th>
                <th>Points Scored</th>
                <th>Quarterback</th>
          </tr>
        </table>
          {PostData.map((postDetail, index)=>{
          return (
            <table style={{"borderWidth":"1px", 'borderStyle':'solid'}}>
                <tr>
                    <td>{postDetail.team}</td>
                    <td>{postDetail.points}</td>
                    <td>{postDetail.qb}</td>
                </tr>
            </table>
          )
        })}
      </div>
    );
  }
}

export default PostList;

Answer 1

Я думаю, что имеет смысл сделать следующее.Также я бы сказал, что ваша настоящая проблема не в React, а в стиле и CSS.Проверьте вашу таблицу в веб-браузере и посмотрите на этот пример.

    import React, { Component } from 'react'
    import table from '../styles/table.css'
    import PostData from '../data/week1scoring.json'

    class PostList extends Component {
      render() {
        return (
          <div>
            <table style={{"borderBottom":"1px solid black","borderCollapse":"collapse";}}>
              <tr>
                    <th style={{"border": "1px solid black"}}>Team</th>
                    <th style={{"border": "1px solid black"}}>Points Scored</th>
                    <th style={{"border": "1px solid black"}}>Quarterback</th>
              </tr>
              {PostData.map((postDetail, index)=>{
              return (
                    <tr>
                        <td style={{"border": "1px solid black"}}>{postDetail.team}</td>
                        <td style={{"border": "1px solid black"}}>{postDetail.points}</td>
                        <td style={{"border": "1px solid black"}}>{postDetail.qb}</td>
                    </tr>
              )
            })}
            </table>
          </div>
        );
      }
    }

export default PostList;

Еще лучшим способом было бы добавить

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
} 

в таблицуФайл .css, который вы импортируете.