我是webDevelop的新手。在这里,我有一张桌子,
<div className="row">
<div className="col-12">
<div className="table-responsive">
<table className="table table-hover" id="dashboard">
<thead>
<tr className="text-center">
<th></th>
<th scope="col">Rname
</th>
<th scope="col">Nod
</th>
<th scope="col">final score
</th>
<th scope="col">Score added today
</th>
<th scope="col">Updo Date Final Score
</th>
</tr>
</thead>
<tbody className="text-center">
{props.data && props.data.length > 0 && props.data.map((item, key) => {
return (
<tr key={key}>
<td align="center">
<input type="checkbox" />
</td>
<td onClick={props.hideTable}>
{item.rname}
{!props.showTable && <JobsTable jobList={item.jdScoresResponses} />}
</td>
<td className="font-weight-bold">{item.noOfJds}</td>
<td>{item.yesterdaysFinalScore}</td>
<td className="font-weight-bold">{item.todaysScore}</td>
<td className="font-weight-bold">{item.uptoDateScore}</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>
</div>
现在,这里还有另外一个表格,只需单击td
即可打开。因此,我为此使用react.js
。因此,现在,我要将此表固定为标头的CSS就像,
#dashboard thead {
flex: 0 0 auto;
}
#dashboard table {
display: flex;
flex-flow: column;
width: 100%;
}
#dashboard tr {
width: 100%;
display: table;
table-layout: fixed;
}
现在,这里发生了什么,我又添加了一张表格,单击td
即可看到该表格。
现在,该表正在获取fixed-width
,因为它是固定布局。因此,正因为如此,它只出现在一个td中。那么,对此有什么解决方案吗?有人可以帮我吗?