JSFiddle - React, Tailwind, and code Playground

HTML

<table>
	<tbody>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
        </tr>
		<tr>
			<td>Hello</td>
			<td><div>This is a div in a td with a longer text</div></td>
            <td><div>This is aaaaaaaaaaaalso a td with a looong word</div></td>
            <td>Normal sized td</td>
		</tr>
        <tr>
			<td>Hello</td>
			<td><div>This is a div in a td with a longer text</div></td>
            <td><div>This is aaaaaaaaaaaalso a td with a looong word</div></td>
            <td>Normal sized td</td>
		</tr>
        <tr>
			<td>Hello</td>
			<td><div>This is a div in a td with a longer text</div></td>
            <td><div>This is aaaaaaaaaaaalso a td with a looong word</div></td>
            <td>Normal sized td</td>
		</tr>
	</tbody>
</table>

CSS

#iframe1{
    border:none;
    width:100%;
    height:84px;
} 
td {
  overflow: hidden;
  border: 1px;   
    border-color:none;
  height: 50px;
  padding: 5px;
  white-space:nowrap;
}
div {
    height: 16px;
}

JavaScript

$("tr:even").css("background-color", "rgb(225,225,225)");
$("tr:odd").css("background-color", "#ffffff");