JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
    <col width="10%" />
    <col width="54%" />
    <col width="14%" />
    <col width="22%" />
    <thead class="fixedHeader">
        <tr>
            <th class="questionno">Question No.</th>
            <th class="question">Question</th>
            <th class="option">Option Type</th>
            <th class="image">Image</th>
        </tr>
    </thead>
    <tbody class="scrollContent">
        <tr>
            <td class="questionno">1</td>
            <td class="question">What is a RAM?</td>
            <td class="option">A-E</td>
            <td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">2</td>
            <td class="question">Name 3 car maneuvers you may do in a test?</td>
            <td class="option">A-F</td>
            <td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">3</td>
            <td class="question">What is a RAM?</td>
            <td class="option">A-E</td>
            <td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">4</td>
            <td class="question">Name 3 car maneuvers you may do in a test?</td>
            <td class="option">A-F</td>
            <td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">5</td>
            <td class="question">What is a RAM?</td>
            <td class="option">A-E</td>
            <td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">6</td>
            <td class="question">Name 3 car maneuvers you may do in a test?</td>
            <td...

CSS

div.tableContainer {
    clear: both;
    border: 1px solid #963;
    overflow: auto;
}

html>body tbody.scrollContent {
    display: block;
    height: 100px;
    overflow: auto;
    width: 100%
}


html>body thead.fixedHeader tr {
    display: block
}

html>body td {
    box-sizing: border-box;
    border: 1px solid grey;
}

table .questionno {
    width: 10%;
}
table .question {
    width: 54%;
}
table .option {
    width: 14%;
}
table .image {
    width: 22%;
}