Таблица css выдача в reactJS - PullRequest
Новая
       17

Таблица css выдача в reactJS

0 голосов
/ 13 июля 2020

У меня странное поведение с данными таблицы, они вообще не выровнены, как я могу решить эту проблему? есть ли способ указать ширину столбца и начать текст с той же позиции?

см. таблицу ниже

таблица

вот мой код, содержащий заголовок таблицы: 

    const HospitalsList = (props) => (
<div className="content-container">
    <div className="header__content">
        <h1>Hospitals List</h1>
    </div>
    
    <HospitalsListFilters />
  
    <AddHospitalPage/>
        <table className="content-table">
            <thead>
               
                <tr>
                    <th>Hospital Name</th>
                    <th>Province</th>
                    <th>Sector</th>
                    <th>No of OR</th>
                    <th>No of Beds</th>
                </tr>

             </thead>
        </table>
    {props.hospitals.map((hospital) => {
       return <HospitalListItem key={hospital.id}{...hospital} />
    })}

</div>
)

, а вот код для данных таблицы: 

const HospitalListItem =({id, name, province, sector, noOfOR, noOfBeds,lastUpdate, dispatch}) => (
<div>
    <table className="content-table">
        <tbody>
            <tr>
            
                <Link to ={`/edit/${id}`}>
                    <td>{name}</td>
                </Link>
                <td>{province}</td>
                <td>{sector}</td>
                <td>{noOfOR}</td>
                <td>{noOfBeds}</td>
            </tr>
        </tbody>
    </table>
</div>

вот файл css: 

    .content-table {
    border-collapse: collapse;
    font-size: larger;
    min-width: 1200px;
    max-width: 1400px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    margin-left: $l-size;
  
    
    thead tr {
        th{
            padding : 12px 15px;

        }
     
        background-color: teal;
        color: white;
        font-weight: bold;
        
    }
    td {
        padding : 12px;
        

    }
    tbody tr {
        border-bottom: 1px solid #dddddd;
    }
    tbody tr:last-of-type{
        border-bottom: 2px solid #dddddd;
    }

}

1 Ответ

1 голос
/ 13 июля 2020

Вы создаете новую таблицу для каждой строки. Вместо этого вы должны .map внутри основной таблицы (в элементе tbody): 

<table className="content-table">
  <thead>
    <tr>
      <th>Hospital Name</th>
      <th>Province</th>
      <th>Sector</th>
      <th>No of OR</th>
      <th>No of Beds</th>
    </tr>
  </thead>
  <tbody>
    {props.hospitals.map((hospital) => {
       return <HospitalListItem key={hospital.id} {...hospital} />
    })}
  </tbody>
</table>

Затем измените HostpitalListItem, чтобы отображалась только строка таблицы: 

const HospitalListItem =({id, name, province, sector, noOfOR, noOfBeds,lastUpdate, dispatch}) => (
  <tr>
    <td><Link to={`/edit/${id}`}>{name}</Link></td>
    <td>{province}</td>
    <td>{sector}</td>
    <td>{noOfOR}</td>
    <td>{noOfBeds}</td>
  </tr>
)
...