CODEWITHSUNDEEP
htmlreactjshtml-tablereact-bootstrap
J.erome
J.erome

Reputation: 788

How to vertically align elements in a table element?

I have some issues with my tables. I create two tables, one under the other and I want to center elements but I'm having issues with his part. My elements aren't vertically aligned and also they aren't really centered as you can see on the picture below.

enter image description here

The code is the following one:

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

(I don't know how to add the react-bootstrap to the snippet)

How can I align and center my first table elements ?

Upvotes: 4

Views: 3996

Answers (1)

Apostolos
Apostolos

Reputation: 10463

So what you need to do at first is to define in your td a verticalAlign: 'top' property in order for all tds to be aligned.

Also, if you use different font at one td a small difference will be shown (it will be displayed some pixels lower than the other tds if font is bigger) so you should use same font for all td.

Check this sandbox

Upvotes: 3

Related Questions