Как отрегулировать высоту определенной ячейки ⇐ Html

[Anonymous]

Ниже приведен дизайн моей таблицы, где я хочу сохранить высоту строки ячейки таблицы 1: Data = Высота ячейки заголовка, но ряд 2 должен растянуться до конца контейнера, но не. also i need the value in the middle of the space but that is also not happening please see the screen shot of what i want in my table design

.

Код: Выделить всё

/* CSS for the layout */
body {
font-family: Arial, sans-serif;
margin: 20px;
}

.table-container {
display: flex;
flex-direction: column;
border: 4px solid grey;
}

/* Header styling */
.header {
display: flex;
background-color: #f4f4f4;
font-weight: bold;
text-align: center;
padding: 10px;
border-bottom: 1px solid #ddd;
}

/* The header spans both the image and the table */
.header div {
flex: 1;
}

.header .header-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

/* Content Section */
.content {
display: flex;
}

/* Image container */
.image-container {
width: 150px;
background-color: #f4f4f4;
text-align: center;
padding: 10px;
border-right: 1px solid #ddd;
}

.image-container img {
max-width: 100%;
height: 400px;
}

/* Table Styling */
.custom-table {
width: 100%;
border-collapse: collapse;
margin: 0;
}

.custom-table th,
.custom-table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}

.custom-table tr:nth-child(even) td {
background-color: #f9f9f9;
}

.row-2 {
display: flex;
}

.row-2 .column {
flex: 1;
padding: 10px;
}

.row-2 .column:not(:last-child) {
border-right: 1px solid black;
}< /code>



Header






[img]https://cdn.pixabay.com/photo/2016/09/29/08/33/apple-1702316_1280.jpg[/img]





Row 1: Data




Row 2

Подробнее здесь: https://stackoverflow.com/questions/796 ... cular-cell