DreamrW Posted July 1, 2023 Share Posted July 1, 2023 I'd like to reduce the size of the HTML table I've included in the product page, including table width and font size. I'd like to match the font used elsewhere on the page (paragraph 3 and heading 4) https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva Here's the code: <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; } th, td { padding: 8px; } tr:hover {background-color: #ECEDEF;} td.thick { font-weight: bold; } </style> <body> <table style="width:100%"> <colgroup> <col span="1" style="font-weight: bold;"> </colgroup> <tr> <th></th> <th>1 kVA / 0,9 kW </th> <th>2 kVA/ 1,8 kW </th> <th>3 kVA / 2,7 kW </th> </tr> <tr> <td class="thick">Model</td> <td ALIGN=CENTER>UPS102N2000B035</td> <td ALIGN=CENTER>UPS202N2000B035</td> <td ALIGN=CENTER>UPS302N2000B035</td> </tr> <tr> <td class="thick">Voltage</td> <td colspan="3", ALIGN=CENTER>220Vac / 230Vac / 240Vac, single phase</td> </tr> <tr> <td class="thick">Input Voltage Range</td> <td colspan="3", ALIGN=CENTER>175V - 280V (Full load), 80V - 175V (50% to 100% linear derating)</td> </td> </tr> <tr> <td class="thick">Input Frequency Range</td> <td colspan="3", ALIGN=CENTER>50/60Hz (+/- 10Hz) Auto selectable</td> </tr> <tr> <td class="thick">Input Connection</td> <td ALIGN=CENTER>Power cord (IEC-320-C14)</td> <td colspan="2", ALIGN=CENTER>Power cord (receptacle IEC-320-C20)</td> </tr> <tr> <td class="thick">Output Voltage Regulation</td> <td colspan="3", ALIGN=CENTER>220 / 230 / 240 Vac +/- 2% </td> </tr> <tr> <td class="thick">Output Frequency Regulat.</td> <td colspan="3", ALIGN=CENTER>50 / 60 Hz (+/- 0,1 Hz)</td> </tr> <tr> <td class="thick">Overload (All modes) </td> <td colspan="3", ALIGN=CENTER>105%~125% 1 min; 126%~150% 30 sec; > 150% 0,5 sec </td> </tr> </tr> <tr> <td class="thick">Output Receptacle</td> <td ALIGN=CENTER>IEC320 C13 x 4</td> <td colspan="2", ALIGN=CENTER>IEC320 C13 x 6, C19 x 1</td> </tr> <tr> <td class="thick">Internal Battery</td> <td ALIGN=CENTER>2 pcs 12V/7Ah</td> <td ALIGN=CENTER>4pcs 12V/7Ah</td> <td ALIGN=CENTER>6pcs 12V/9Ah </td> </tr> <tr> <td class="thick">Max. charging current</td> <td ALIGN=CENTER>1A</td> <td ALIGN=CENTER>1A</td> <td ALIGN=CENTER>1A</td> </tr> <tr> <td class="thick">Interface</td> <td colspan="3", ALIGN=CENTER>USB x 1, Mini card slot x 1</td> </tr> <tr> <td class="thick">Dimensions (WxDxH) mm</td> <td ALIGN=CENTER>145 x 320 x 225 mm </td> <td colspan="2", ALIGN=CENTER>190 x 390 x 325 mm</td> </tr> </tr> <tr> <td class="thick">Weight</td> <td ALIGN=CENTER>9 kg </td> <td ALIGN=CENTER>18,6 kg </td> <td ALIGN=CENTER>24,4 kg </td> </tr> </table> </body> </html> Link to comment
DreamrW Posted July 1, 2023 Author Share Posted July 1, 2023 I've sorted width - just not sure how to style the font to match the site now 😬🙏🏼 Link to comment
DreamrW Posted July 2, 2023 Author Share Posted July 2, 2023 So I've sorted the font size with some CSS provided for a previous issue (thanks @tuanphan) I included the div# for each table I wanted to modify but it applied the restyle to all font on the page, including headers within Additional Info that I didn't want to edit. The CSS I used was: /* additional info table font size */ div#block-yui_3_17_2_1_1688223795105_32983, div#block-yui_3_17_2_1_1688149673067_6090, div#block-yui_3_17_2_1_1688223795105_20753, div#block-yui_3_17_2_1_1688223795105_15700, div#block-yui_3_17_2_1_1688223795105_4061, p { font-size: 15px !important; } Circled in red is the headings I didn't want affected. Link to comment
DreamrW Posted July 2, 2023 Author Share Posted July 2, 2023 Removed the p and got it working 🫣 tuanphan 1 Link to comment
tuanphan Posted July 3, 2023 Share Posted July 3, 2023 So did you solve all or still need help? EarvinChong 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DreamrW Posted July 3, 2023 Author Share Posted July 3, 2023 8 hours ago, tuanphan said: So did you solve all or still need help? Solved it thanks Tuan! 🙏 tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment