Первоначально код работал как запланировано. Строки состояния должны были заполнить всю ячейку и располагаться прямо рядом с зеленым квадратом. Зеленая коробка в конечном итоге станет портретной картинкой персонажа. Я попытался закруглить края зеленого квадрата, и как только я это сделал, строки состояния перепрыгнули и стали короче, чем предыдущие 400 пикселей. Я удалил радиус границы из зеленого квадрата css, но строки состояния не go вернулись к своему первоначальному размеру / положению ...
... есть идеи?
.header {
width: 100%;
margin: 0 auto;
text-align: center;
}
.w3-light-grey w3-round-xlarge {
width: 700px;
}
#chad {
height: 100px;
width: 100px;
background-color: green;
}
iframe {
height: 300px;
width: 504px;
border: none;
}
.button-col {
width: 252px;
}
<table align="center">
<tr>
<td align="right" colspan="2">
Welcome back, <?=$_SESSION['name']?>!
<a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a> |
<a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
</td>
</tr>
<tr>
<td rowspan="3">
<div id="chad"></div>
</td>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="hp" class="w3-container w3-round-xlarge w3-red" style="width:100">100/100</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="mp" class="w3-container w3-round-xlarge w3-blue" style="width:100">100/100</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="xp" class="w3-container w3-round-xlarge w3-yellow" style="width:100">100/100</div>
</div>
</td>
</tr>