Problème CSS

Bonjour,

Dans une page Web, j'ai créé un tableau contenant deux <div>. Voici mon code :

<table>
<tr>
<td>
<div style="border: 1px solid black; height: 100%;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus tempor orci non dictum. Cras arcu urna, tincidunt a malesuada vestibulum, pharetra sit amet ante. Sed ut quam nibh. Morbi vitae purus purus, at hendrerit magna. In porttitor vestibulum nunc in posuere. Aenean pulvinar, enim vitae rhoncus faucibus, sem leo feugiat ligula, vel fringilla ligula dui non dolor. Pellentesque et nisl sed dui feugiat tempor ac ut dui. In hac habitasse platea dictumst. Donec bibendum, elit non posuere faucibus, magna eros pellentesque ligula, non convallis purus felis et orci. Donec in ligula at sapien tempor dictum. Etiam sed nisi est. Aliquam condimentum metus sit amet erat condimentum vel accumsan nunc gravida. Curabitur congue euismod ullamcorper. Nulla tincidunt sapien quis dui tristique aliquam. Donec interdum ante sit amet metus scelerisque ut interdum eros dictum. Pellentesque gravida malesuada sapien, quis pellentesque nunc malesuada ac.</p>

<p>Phasellus quis enim ante, at facilisis velit. Proin ac ipsum metus. Mauris sed elit odio. Fusce malesuada sem sit amet felis adipiscing imperdiet rutrum mauris porttitor. Sed risus augue, tempus suscipit dapibus id, ultrices eget lorem. Nunc tellus ipsum, ullamcorper commodo semper aliquam, fringilla et purus. Vivamus bibendum justo nec nisi pharetra elementum in a nunc. Cras mattis, tellus quis suscipit pellentesque, nunc justo rutrum lectus, ullamcorper imperdiet ante lorem eu turpis. Morbi bibendum nunc eu nisl tempor mattis. Phasellus fermentum elit nec nisi pulvinar pellentesque. Nullam viverra turpis malesuada diam pretium interdum vel fermentum nisl. Praesent leo mi, luctus eget pharetra a, sagittis quis sapien. Nam ullamcorper lobortis sem, sed semper elit tincidunt id. Maecenas quis mi metus. Nam at velit vel ipsum pharetra malesuada non et leo.</p>
</div>
</td>
<td>
<div style="border: 1px solid black; height: 100%;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus tempor orci non dictum. Cras arcu urna, tincidunt a malesuada vestibulum, pharetra sit amet ante. Sed ut quam nibh. Morbi vitae purus purus, at hendrerit magna. In porttitor vestibulum nunc in posuere. Aenean pulvinar, enim vitae rhoncus faucibus, sem leo feugiat ligula, vel fringilla ligula dui non dolor. Pellentesque et nisl sed dui feugiat tempor ac ut dui. In hac habitasse platea dictumst. Donec bibendum, elit non posuere faucibus, magna eros pellentesque ligula, non convallis purus felis et orci. Donec in ligula at sapien tempor dictum. Etiam sed nisi est. Aliquam condimentum metus sit amet erat condimentum vel accumsan nunc gravida. Curabitur congue euismod ullamcorper. Nulla tincidunt sapien quis dui tristique aliquam. Donec interdum ante sit amet metus scelerisque ut interdum eros dictum. Pellentesque gravida malesuada sapien, quis pellentesque nunc malesuada ac.</p>
</div>
</td>
</tr>
</table>

Le premier <div> contient 2 paragraphes de Lorem Ipsum, tandis que le deuxième n'en contient qu'un seul.
Chaque <div> contient l'attribut style="border: 1px solid black; height: 100%;", c'est-à-dire que la hauteur des deux div est égale, puisque le premier contient plus de texte, et fera en sorte que la hauteur du tableau sera plus grande. (Dans un <tr>, chaque <td> doit avoir la même hauteur.)
La bordure, quant à elle, sert uniquement à afficher les contours des divs.

Mais lorsque j'affiche la page, le deuxième div (celui qui contient un seul paragraphe) n'a pas la même hauteur que le premier, malgré le height: 100%.

Pouvez-vous m'aider, S.V.P. ?