Table css reactJS 中的问题

Question

我对 table 的数据有一个奇怪的行为，它根本没有对齐，我该如何解决这个问题？有没有办法指定列宽并从相同位置开始文本？

见下文table

table

这是我的代码，其中包含 table 头部：

    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>
)

这里是 table 数据的代码：

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;
    }

}

Answer 1

您正在为每一行创建一个新的 table。相反，您应该 .map 在主 table 内（在 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 以仅呈现 table 行：

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>
)

Table css reactJS 中的问题

Table css issue in reactJS

css

css-tables

reactjs