css - Aligning table header text and a checkbox all on one line and left-justified

Question

I am using React for an automobile web app.

I am using a table library called React-Talbe to build a dynamic table.

To display HTML in a table header, I need to do this:

Header: () => (<div style={{ margin: 0, width: 250 }}><span>Vehicle Choices</span><span> *Include Foreign <input type="checkbox" name="includeForeignAutos" /></span></div>),

But when it renders to the webpage, it looks bad like this:

   Vehicle Choices *Include    
   Foreign
             [ ]

I am trying to get it to line up to the left and all on one line, like this:

   Vehicle Choices  *Include Foreign [ ]

This is what the rendered HTML looks like:

<th colspan="8" role="columnheader">
    <div>
       <span>
          <div style="margin: 0px; width: 250px;">
             <span>Vehicle Choices</span>
             <span> 
                " *Include Foreign "
                <input type="checkbox" name="includeForeignAutos">
             </span>
          </div>
       </span>
    </div>
</th>

Is there a way to use inline style tags to make sure it is all and one line and justified to the left of the table header?

Thanks!

question from:https://stackoverflow.com/questions/65905627/aligning-table-header-text-and-a-checkbox-all-on-one-line-and-left-justified

Answer 1

You have width set as 250px and it requires more width to be in the same line. Width is less that is why it is not coming in same line.