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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…