Menu
In the code below, I am trying to align in the following table "Funny" near the second row, and "Sad" near the third row.
So far, I have thrown a position: relative; for the Sad container and "Funny" got right where I wanted, but now I can't get "Sad" to be under it.
Bellow is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Table fitting</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.p2 {
position: absolute;
}
.t1{
text-align:center;
font-size: 130%;
border:1px solid red;
}
.t2{
border:1px solid red;
padding: 5px;
font-family: Roboto;
text-align: center;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="p1">Funny</div>
<div class="p2">Sad</div>
</td>
<td>
<table>
<tr>
<th class="t1">Cats</th>
<th class="t1">Dogs</th>
</tr>
<tr>
<td class="t1">Catty</td>
<td class="t1">Rocky</td>
</tr>
<tr>
<td class="t1">Kate</td>
<td class="t1">Rex</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>I would like some help to align the container that has "Sad" exactly behind the one with "Funny" and near the third row.
The method that you are doing is completely wrong. This gives your expected output.
<!DOCTYPE html>
<html>
<head>
<title>Table fitting</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table>
<tr>
<th class="t1"></th>
<th class="t1">Cats</th>
<th class="t1">Dogs</th>
</tr>
<tr>
<td style="text-align:right",class="t1">Funny</td>
<td class="t1">Catty</td>
<td class="t1">Rocky</td>
</tr>
<tr>
<td style="text-align:right",class="t1">Sad</td>
<td class="t1">Kate</td>
<td class="t1">Rex</td>
</tr>
</table>
</body>
</html>
Feel free to ask any further questions!
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
