How to fix the div aligning inside <table> - html

Question

How can I have align Name with title/phone/email and when I expand my page the aligning is messing up as shown in screen shot 1 and 2
I have tried: style="display:initial;position: relative; "
but does not do any good.
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="data2Col first " colspan="2">
<div>
<span class="labelCol vfLabelColTextWrap" scope="row" style="display:inline-block; ">Name </span>
<span class="data2Col"> Erich Schulz </span>
</div>
</td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap " scope="row">Title</th>
<td class="data2Col "><span id="j_id0:j_id1:j_id3:j_id4:j_id6"></span></td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap " scope="row">Phone</th>
<td class="data2Col "><span id="j_id0:j_id1:j_id3:j_id4:j_id7">[phone]</span></td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap last " scope="row">Email</th>
<td class="data2Col last "><span id="j_id0:j_id1:j_id3:j_id4:j_id8">test#example.com</span></td>
</tr>
</tbody>
</table>

Answer 1

Try replacing both span elements with th and td
<span class="labelCol vfLabelColTextWrap" scope="row" style="display:inline-block; ">Name </span>
<span class="data2Col"> Erich Schulz </span>
Shown below:
<th class="labelCol vfLabelColTextWrap " scope="row">Name </th>
<td class="data2Col"> Erich Schulz </td>

Answer 2

As written in my comment, I would replace the span elements in the first table row by td elements (and remove the colspan=2 from that row):
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="data2Col first ">
<div>
<td class="labelCol vfLabelColTextWrap" scope="row" style="display:inline-block; ">Name </td>
<td class="data2Col"> Erich Schulz </td>
</div>
</td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap " scope="row">Title</th>
<td class="data2Col "><span id="j_id0:j_id1:j_id3:j_id4:j_id6"></span></td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap " scope="row">Phone</th>
<td class="data2Col "><span id="j_id0:j_id1:j_id3:j_id4:j_id7">[phone]</span></td>
</tr>
<tr>
<th class="labelCol vfLabelColTextWrap last " scope="row">Email</th>
<td class="data2Col last "><span id="j_id0:j_id1:j_id3:j_id4:j_id8">test#example.com</span></td>
</tr>
</tbody>
</table>
Or, if for some reason you have to keep those span elements, wrap them with <td>...</td>
Additional edit: As spencerlarry wrote correctly, the first one is actually a <th> tag. But that probably won't make a difference regarding the alignment.

Answer 3

Why do you use the first column in one piece? Please change the first <tr> block as follows:
<tr>
<td class="labelCol first">
<span class="vfLabelColTextWrap" scope="row">Name </span>
</td>
<td class="data2Col">
Erich Schulz
</td>
</tr>