I think that even if you end up adding inline styles for the desktop display (assuming somewhere between 600 and 700px width), this'll still get squished in the mobile display and you're going to end up right back where you started if you're using a table like this to display the information.
A more straight-forward solution might be to paragraph the information rather than table it so that you've got something that's a bit more flexible for both desktop and mobile without needing to do much inline styling.
For example, a more text-first approach something like...
Area: Splashback
Item: 600mm Black Glass Siemens Induction Hob
Selected Choice: n/a
Qty: 1
Area: Siemens Appliances
Item: Combi Microwave, Single Oven & Hood Quartz Worktop
Selected Choice: n/a
Qty: 1
... might be easier to tokenize and fit into the email.
The code for this might look something more like:
<!-- first item -->
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> Splashback <br>
<strong>Item:</strong> 600mm Black Glass Siemens Induction Hob <br>
<strong>Selected Choice</strong> n/a <br>
<strong>Qty</strong> 1 <br>
<br>
</div>
<!-- second item -->
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> Siemens Appliances <br>
<strong>Item:</strong> Combi Microwave, Single Oven & Hood Quartz Worktop <br>
<strong>Selected Choice</strong> n/a <br>
<strong>Qty</strong> 1 <br>
<br>
</div>
and the HTML shell for the data would look something like:
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> [[TOKEN HERE]] <br>
<strong>Item:</strong> [[TOKEN HERE]] <br>
<strong>Selected Choice</strong> [[TOKEN HERE]] <br>
<strong>Qty</strong> [[TOKEN HERE]] <br>
<br>
</div>
.png)