JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Here's the problem right here </h4>
<div>
	<table style="width:700px;"> <!-- no control over the inline CSS-->
		<tr>
			<td>wut</td>
			<td>wut</td>
		</tr>
		<tr>
			<td>wut</td>
			<td>wut</td>
		</tr>
	</table>
</div>

<h4>An exmaple of the display:block approach</h4>
<div class="blockTablesInHere">
	<table style="width:700px;"><!-- no control over the inline CSS-->
		<tr>
			<td>wut</td>
			<td>wut</td>
		</tr>
		<tr>
			<td>wut</td>
			<td>wut</td>
		</tr>
	</table>
</div>

<h4>This is what I want, but without removing the inline style</h4>
<div class="fullWidthTablesInHere">
	<table>
		<tr>
			<td>wut</td>
			<td>wut</td>
		</tr>
		<tr>
			<td>wut</td>
			<td>wut</td>
		</tr>
	</table>
</div>

CSS

div{
	border: 2px solid black;
	width:500px;
	margin:10px;
}
table{
	width:100%;
}
td{
	background-color:#555;
	color:white;
}
div.blockTablesInHere table{
		display:block;
		width: 100%;
		max-width: 100%;
		min-width: 100%;
}
div.fullWidthTablesInHere table{
  width:100%;
}