In the provided code snippet, you will notice that the height of the table rows varies slightly based on the height of the images.
Currently, the image tags are set to height: auto;, and changing it to 300px would make all images the same size, however, maintaining the aspect ratio is important.
table {
display: table;
table-layout: fixed;
width: 100%;
margin-bottom: 4rem;
border: 1px solid #c4c4c4;
border-collapse: collapse;
font-size: 1rem;
}
thead {
background: #fbfbfb;
border: 1px solid #c4c4c4;
}
th,
td {
height: 5rem;
padding: 1rem;
}
th {
text-align: start;
background: #fbfbfb;
}
td {
background: #fff;
}
tr {
border: 1px solid #c4c4c4;
}
.read-more {
color: #fff;
background: #005c68;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
padding: 1rem;
}
.price {
font-weight: 700;
}
img {
width: 100%;
max-width: 7em;
height: auto;
}
@media screen and (max-width: 1225px) and (min-width: 1045px) {
.priority-5 {
display: none;
}
}
@media screen and (max-width: 1045px) and (min-width: 835px) {
.priority-5 {
display: none;
}
.priority-4 {
display: none;
}
}
@media screen and (max-width: 835px) and (min-width: 300px) {
.priority-5 {
display: none;
}
.priority-4 {
display: none;
}
.priority-3 {
display: none;
}
}
@media screen and (max-width: 300px) {
.priority-5 {
display: none;
}
.priority-4 {
display: none;
}
.priority-3 {
display: none;
}
.priority-2 {
display: none;
}
}<table>
<thead>
<tr>
<th className="priority-1">Operator</th>
<th className="priority-2">Data Usage</th>
<th className="priority-3">Contract Period</th>
<th className="priority-4">Calls</th>
<th className="priority-5">SMS</th>
<th className="priority-6">Price</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Repeatable content -->
</tbody>
</table>