Changing the height of a table cell in html table - html

Question

I have an HTML table, with three columns.In the second column, I added a simple style as shown below.
table {
border: 1px solid black;
}
.requiredBar {
background-color: #c00;
}
.requiredCol {
width: 1px;
max-width: 1px;
}
<table>
<tr>
<td>Name</td>
<td class="requiredCol requiredBar"> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Password</td>
<td class="requiredCol requiredBar"> </td>
<td><input type="text" /></td>
</tr>
</table>
The output that I am getting is like this. The red bar shown is actually a column. I am trying to reduce its height without changing the height of other cells in the same row.
Is it possible to change the height of some cell (red bar in this case) in an html table of the same row?

Answer 1

You can add a div inside your requiredCol and set its height
table {
border: 1px solid black;
}
.requiredBar {
background-color: #c00;
height: 10px;
width: 2px;
display: block;
}
.requiredCol {
width: 2px;
}
<table>
<tr>
<td>Name</td>
<td class="requiredCol">
<div class="requiredBar"></div>
</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Password</td>
<td class="requiredCol">
<div class="requiredBar"></div>
</td>
<td><input type="text" /></td>
</tr>
</table>

Answer 2

You can't change one cell height without changing row height in a table(actually that's a standard) and that leads table to change some other cells in table.
If you want to ordering some tags (like input and label in this case) its better to use CSS Grid Layout instead of table.
If you insist on using table,you can set the position of item ,which stay in cell with flexbox instead of changing exact cell.
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.