JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">
    <caption class="">caption</caption>
    <thead>
        <tr>
            <th>header</th>
            <th>header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
        
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
        
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
        
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
        
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </tbody>
</table>
<div id="output"></div>

JavaScript

$(document).ready(function() {
    var tableHeight = $('table').outerHeight();
    var captionHeight = $('table > caption').outerHeight();
    $("#output").html("Table outerHeight(): " + tableHeight + '<br>' + "Actual outerHeight with caption: " + (tableHeight+captionHeight));
});