My monitoring website displays dynamic rrd graphs in png format with fixed dimensions.
I am looking to adjust the layout based on browser window size - showing the graphs in 1 column if the width is below a certain threshold, and in 2 columns if it exceeds that limit.
While I understand basic HTML concepts like tables and JavaScript properties such as innerWidth, I am unsure how to effectively use these to implement intelligent column width handling.
This is an excerpt of my current code:
<table style="width:100%">
<tr>
<td>
<body><center>
<h2>CO2: unfiltered values </h2>
<p><a href="./index_CO2unf.html"><img src="./ramdisk/htdocs/CO2unf_1h.png" alt="CO2unf_1h.png"/></a></p><p><br></p>
<h2>CO2: filtered values </h2>
<p><a href="./index_CO2fil.html"><img src="./ramdisk/htdocs/CO2fil_1h.png" alt="CO2fil_1h.png"/></a></p><p><br></p>
<h2>O2: partial pressure O2 values</h2>
<p><a href="./index_O2pp.html"><img src="./ramdisk/htdocs/O2pp_1h.png" alt="O2pp_1h.png"/></a></p><p><br></p>
</td>
<td>
<h2>O2: percentage O2 values</h2>
<p><a href="./index_O2pct.html"><img src="./ramdisk/htdocs/O2pct_1h.png" alt="O2pct_1h.png"/></a></p><p><br></p>
<h2>O2: Temperature values</h2>
<p><a href="./index_O2temp.html"><img src="./ramdisk/htdocs/O2temp_1h.png" alt="O2temp_1h.png"/></a></p><p><br></p>
<h2>O2: Pressure values</h2>
<p><a href="./index_O2pres.html"><img src="./ramdisk/htdocs/O2pres_1h.png" alt="O2pres_1h.png"/></a></p><p><br></p>
</body>
</td>
</tr>
The central </td><td> section needs to be removed when the browser width falls below the defined threshold. How can I achieve this functionality?