I am attempting to create a dynamic table that adjusts automatically to new content. Instead of using fixed padding sizes, I want the padding to adjust itself to fully fit the table. To better understand, here is a simple example:
.table{
width: 800px;
height: 600px;
text-align: center;
background-color: #FBEFF2;
position: relative;
}
#cell{
width: 120px;
height: 500px;
background-color: grey;
}
#cell p{
background-color: rgb(200,200,200);
word-wrap: break-word;
padding-top: 5%;
padding-bottom: 5%;
padding-left: 4px;
padding-right: 4px;
}
.explanation {
position: absolute;
top: 100px;
width: 200px;
left: 180px;
}<div class="table">
<div id="cell">
<p>Addresses</p>
<p>ALKIS</p>
<p>Properties</p>
<p>Addresses</p>
<p>ALKIS</p>
<p>Properties Big enough to fit 3 lines</p>
<p>Addresses</p>
<p>ALKIS</p>
<p>Properties</p>
</div>
</div>
<p class="explanation">I want the padding of the "p" elements to automatically fit to the bottom of #cell. If I add another "p" element to #cell, the padding of all the other "p's" should responsively shrink until all "p" elements fit again...<br />Possible?<br />Yes, I am specifically focused on adjusting the padding! I have already set up the table, but it gets messy every time I add new content to the rows. How can I make the padding of the text fit the rows automatically without fixed sizes?
I appreciate any help!