I need to create a table that will fill the whole width and height of its parent. The parents max-height is set to 220px which should not be exceeded by the table's content. The tbodys max-height is to 200px.
So far I have tried all kinds of answers that I could find, like setting the table to display block and defining the max-heights on different elements. None of all the suggestions helped.
The tables content is always exceeding the parent's height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>table max height</title>
<style>
#container {
max-height: 220px;
width: 100%;
background-color: green;
}
.tg {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%;
table-layout: fixed;
}
.tg tbody {
overflow: auto;
max-height: 200px;
}
.tg td {
border-color: rgb(242 244 245);
border-style: solid;
border-width: 1px;
overflow: hidden;
}
.tg th {
background-color: rgb(242 244 245);
border-color: rgb(242 244 245);
border-style: solid;
border-width: 1px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<table >
<thead>
<tr>
<th>Date</th>
<th>Artist</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021-07-17</td>
<td>Coldplay</td>
<td>195</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>a-ha</td>
<td>194</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Pop Smoke</td>
<td>193</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Topic</td>
<td>192</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Drake</td>
<td>191</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Roddy Ricch</td>
<td>190</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Juice WRLD</td>
<td>189</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Cochise</td>
<td>188</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Pop Smoke</td>
<td>187</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Ariana Grande</td>
<td>186</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Jamie Miller</td>
<td>185</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Sleepy Hallow</td>
<td>184</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Regard</td>
<td>183</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Lil Tjay</td>
<td>182</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CodePudding user response：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>table max height</title>
<style>
#container {
max-height: 220px;
width: 100%;
background-color: green;
overflow:auto; //add overflow css
}
.tg {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%;
table-layout: fixed;
}
.tg tbody {
overflow: auto;
max-height: 200px;
}
.tg td {
border-color: rgb(242 244 245);
border-style: solid;
border-width: 1px;
overflow: hidden;
}
.tg th {
background-color: rgb(242 244 245);
border-color: rgb(242 244 245);
border-style: solid;
border-width: 1px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<table >
<thead>
<tr>
<th>Date</th>
<th>Artist</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021-07-17</td>
<td>Coldplay</td>
<td>195</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>a-ha</td>
<td>194</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Pop Smoke</td>
<td>193</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Topic</td>
<td>192</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Drake</td>
<td>191</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Roddy Ricch</td>
<td>190</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Juice WRLD</td>
<td>189</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Cochise</td>
<td>188</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Pop Smoke</td>
<td>187</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Ariana Grande</td>
<td>186</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Jamie Miller</td>
<td>185</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Sleepy Hallow</td>
<td>184</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Regard</td>
<td>183</td>
</tr>
<tr>
<td>2021-07-17</td>
<td>Lil Tjay</td>
<td>182</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>