Css: Fix Row Height

Setting table row height

try this:

.topics tr { line-height: 14px; }

CSS - fixed height on tr and fixed height on table?

You can set height:8px to the first and second tr. And remove the middle border from the empty cells in the last tr.

.t-table {  border: 1px solid black;  height: 400px;  border-collapse: collapse;}.t-table td {  border: 1px solid black;}.t-table td:empty {  border-left: 0;  border-right: 0;}

<table class="t-table">  <tr style="line-height: 8px; height: 8px;">    <td>A</td>    <td>B</td>  </tr>  <tr style="line-height: 8px; height: 8px;">    <td>1</td>    <td>2</td>  </tr>  <tr>    <td></td>    <td></td>  </tr></table>

How to make image size adapt to row height in an html table

Classic way :
to avoid image to be taken into size calculation , you need to take it out of the flow via position:absolute; .

to size it to the height of the row , make the parent td in position:relative; so it becomes the reference. height:100% will basicly be where to start from.

table-layout:fixed and a width on table and only one td will finish the setting. em is a value easier to manage to fit average max text length.

Here is a possible example to demonstrate the idea. Inline style should be understood

<table style="table-layout:fixed;width: 20em;border:solid;margin:auto">
  <tr>
    <td style="position:relative;width:40%">
      <p>
        <img style="position:absolute;max-width:100%;max-height:100%;top:0;" src="https://dummyimage.com/400">
        <!-- demo img is a 1:1 ratio you need to tune table and td widthS -->
      </p>
    </td>
    <td>
      <p>Pieka Grobbelaar</p>
      <p>082 111 0000 </p>
      <p>pieka@mycompany.co.za</p>
    </td>
  </tr>
</table>
<hr>
<table style="table-layout:fixed;width: 20em;border:solid;margin:auto">
  <tr>
    <td style="position:relative;width:40%">
      <p>
        <img style="position:absolute;max-width:100%;max-height:100%;top:0;" src="https://dummyimage.com/300x400">
        <!-- demo img is a 1:33 ratio you need to tune table and td widthS -->
      </p>
    </td>
    <td>
      <p>Pieka Grobbelaar</p>
      <p>082 111 0000 </p>
      <p>CSS Land</p>
      <p>pieka@mycompany.co.za</p>
    </td>
  </tr>
</table>

How to adjust row height for layout grid in react?

You could do this pretty easily with CSS grid with the grid-template-areas prop

I set the rows for the sidebar as 2/12, main as 8/12, and the last element 2/12.

styles.css

.container {
  display: grid;
  height: 100vh;
  width: 100%;

  grid-template-columns: 1fr;
  grid-template-rows: 2fr 8fr 2fr;
  grid-template-areas:
    "sidebar"
    "main"
    "contents";
  grid-gap: 3px;
}

.sidebar {
  background-color: blue;
  grid-area: sidebar;
}

.main {
  background-color: lightblue;
  grid-area: main;
}

.content {
  background-color: green;
  grid-area: contents;
}

App.js

import React from "react";
import "./styles.css";

const App = () => {
  return (
    <div className="container">
      <div className="sidebar" />
      <div className="main" />
      <div className="content" />
    </div>
  );
};

export default App;

https://codesandbox.io/s/silly-hertz-pppbf2?file=/src/styles.css

How do I specify row heights in CSS Grid layout?

One of the Related posts gave me the (simple) answer.

Apparently the auto value on the grid-template-rows property does exactly what I was looking for.

.grid {
    display:grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
    grid-gap:10px;
    height: calc(100vh - 10px);
}