我的表格有一些问题。我创建了两个表,一个在另一个下面,我想将元素居中,但我对他的部分有疑问。我的元素没有垂直对齐,也没有真正居中,如下图所示。
代码如下:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Table from 'react-bootstrap/Table';
<Table>
<tbody>
<tr>
<td style={{width:"33%", textAlign: 'center', wordWrap: 'break-word', overflowWrap: 'break-word', width:"33%"}}>
<p> Negative = 0, Neutral = 1, Positive = 2.</p>
</td>
<td style={{width:"33%"}}>
<p style={{display: 'flex', justifyContent:'center', alignItems:'center'}}> Filter the prediction </p>
<input
style={{display: 'flex', justifyContent:'center', alignItems:'center'}}
className="form-control input-sm"
name="filter"
type="text"
maxLength="1"
pattern="0|1|2"
/>
</td>
<td style={{textAlign: 'center', wordWrap: 'break-word', overflowWrap: 'break-word', width:"33%"}}>
<center>
<p style={{color:'#FFA500', fontSize:20}}> In order to download the CSV file, you must validate each highlighted line</p>
</center>
</td>
</tr>
</tbody>
</Table>
<Table striped bordered hover className='dataTable'>
<thead>
<tr>
<th>#</th>
<th>Text</th>
<th>PyFeel</th>
<th style={{whiteSpace:'nowrap'}}>
Google CNL
</th>
<th>Cancellation</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</Table>
(我不知道如何将 react-bootstrap
添加到代码片段中)
如何对齐和居中我的第一个表格元素?
最佳答案
所以您首先需要做的是在您的 td
中定义一个 verticalAlign: 'top'
属性,以便所有 tds 对齐。
此外,如果您在一个 td
处使用不同的字体,将会显示一个小的差异(如果字体较大,它将显示为比其他 tds 低一些像素),因此您应该使用相同的字体所有 td
。
检查这个sandbox
https://stackoverflow.com/questions/68297279/
相关文章:
serialization - 使用#[serde(untagged)] 和#[serde(with
pandas - 不必要的 .list.item 嵌套在 pyarrow 上传数据框中的 BigQu
ansible - 如何在ansible替换模块中转义+字符
kubernetes - 部署后如何在 kubernetes 中删除 Traefik 2.0 中间件
python - 通用协议(protocol) : mypy error: Argument 1 h
api - 通过 Bitbucket REST API 获取所有 Pull-Request 评论