CODEWITHSUNDEEP
htmlcsshtml-tabletablecell
lambad
lambad

Reputation: 1066

Changing the height of a table cell in html table

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">&nbsp;</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td class="requiredCol requiredBar">&nbsp;</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?

Upvotes: 1

Views: 2691

Answers (2)

marzzy
marzzy

Reputation: 788

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.

Upvotes: 0

Itay Gal
Itay Gal

Reputation: 10834

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>

Upvotes: 1

Related Questions