I have a table and I inserted a div inside it, but now the alignment with the td is off. I applied display: inline-block to both the td and div elements, but the td only shifted slightly. How can I correct this?
Here's my HTML code for the table :
#box4 {
height: 200px;
width: 300px;
background-color: #f2f2f2;
}
th,
td {
padding: 15px;
}<table style="margin-left:5%; margin-bottom: 10%;">
<tr>
<td>
<h3>Name:</h3>
</td>
<td>Course name placeholder.</td>
</tr>
<tr>
<td>
<h3>Description:</h3>
</td>
<td>Course description placeholder.</td>
</tr>
<tr>
<td>
<h3>Chapters:</h3>
</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Chapter 1</option>
<option value="saab">Chapter 2</option>
<option value="mercedes">Chapter 3</option>
<option value="audi">Chapter 4</option>
</select>
</td>
</tr>
<tr>
<td style="display: inline-block; position: relative;top:-20%">
<h3>Video:</h3>
</td>
<td>
<div style="display: inline-block;" id="box4"></div>
</td>
</tr>
<tr>
<td>
<h3>Quiz:</h3>
</td>
<td><button>Take quiz</button></td>
</tr>
<tr>
<td>
<h3>Course trial:</h3>
</td>
<td><button>Start trial</button></td>
</tr>
<tr>
<td></td>
<td><button>Community</button></td>
</tr>
</table>View how it appears https://i.stack.imgur.com/jAt8j.png