tighten iframes by using scrolling="no"

Author: gordonwoodhull

docs/blog/posts/2024-07-02-beautiful-tables-in-typst/index.qmd

@@ -28,121 +28,130 @@ You can click on the links below the examples to see the full documents, with so
 
 This example uses a dashed border to draw attention to two cells.
 
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
 ::: {.column width="50%" style="padding-top:1.5em"}
-![](images/pandas-confusion-matrix.png){width=700}
-[Typst](examples/pandas-confusion-matrix.pdf){target="_blank"}
+![](images/pandas-confusion-matrix.png){width="700"} [Typst](examples/pandas-confusion-matrix.pdf){target="_blank"}
 :::
+
 ::: {.column width="50%"}
 ```{=html}
-<iframe class="html-demo" src="demo/pandas-confusion-matrix.html" width=700 height=400></iframe>
+<iframe class="html-demo" src="demo/pandas-confusion-matrix.html" width=700 height=250 scrolling="no"></iframe>
 ```
+
 [HTML](examples/pandas-confusion-matrix.HTML){target="_blank"}
 :::
-::::
 :::::
+::::::
 
 ## Cars heatmap (gt / R)
 
 This example uses cell background colors to encode ranges of values.
 
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
 ::: {.column width="50%" style="padding-top:2.2em"}
-![](images/gt-cars.png){width=430}
+![](images/gt-cars.png){width="430"}
 
 [Typst](examples/gt-cars.pdf){target="_blank"}
 :::
+
 ::: {.column width="50%"}
 ```{=html}
-<iframe class="html-demo" src="demo/gt-cars.html" width=430 height=500></iframe>
+<iframe class="html-demo" src="demo/gt-cars.html" width=430 height=375 scrolling="no"></iframe>
 ```
+
 [HTML](examples/gt-cars.HTML){target="_blank"}
 :::
-::::
 :::::
+::::::
 
 ## Oceania (Great Tables / Python)
 
 Borders can show the structure of grouped rows.
 
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
 ::: {.column width="50%" style="padding-top:2.1em"}
-![](images/great-tables-oceania.png){width=600}
+![](images/great-tables-oceania.png){width="600"}
 
 [Typst](examples/great-tables-oceania.pdf){target="_blank"}
 :::
+
 ::: {.column width="50%"}
 ```{=html}
-<iframe class="html-demo" src="demo/great-tables-oceania.html" width=600 height=1020></iframe>
+<iframe class="html-demo" src="demo/great-tables-oceania.html" width=600 height=907 scrolling="no"></iframe>
 ```
+
 [HTML](examples/great-tables-oceania.HTML){target="_blank"}
 :::
-::::
 :::::
+::::::
 
 ## Islands (gt / R)
 
 Font sizes and minimal borders make this table stand out.
 
-
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
 ::: {.column width="50%" style="padding-top:2.2em"}
-![](images/gt-islands.png){width=500}
+![](images/gt-islands.png){width="500"}
 
 [Typst](examples/gt-islands.pdf){target="_blank"}
 :::
+
 ::: {.column width="50%"}
 ```{=html}
-<iframe class="html-demo" src="demo/gt-islands.html" width=400 height=680></iframe>
+<iframe class="html-demo" src="demo/gt-islands.html" width=400 height=580 scrolling="no"></iframe>
 ```
+
 [HTML](examples/gt-islands.HTML){target="_blank"}
 :::
-::::
 :::::
+::::::
 
 ## Solar Zenith (Great Tables / Python)
 
 Another cool heatmap.
 
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
 ::: {.column width="50%" style="padding-top:1.7em"}
-![](images/great-tables-solar-zenith.png){width=750}
+![](images/great-tables-solar-zenith.png){width="750"}
 
 [Typst](examples/great-tables-solar-zenith.pdf){target="_blank"}
 :::
+
 ::: {.column width="50%"}
 ```{=html}
-<iframe class="html-demo" src="demo/great-tables-solar-zenith.html" width=850 height=680></iframe>
+<iframe class="html-demo" src="demo/great-tables-solar-zenith.html" width=850 height=565 scrolling="no"></iframe>
 ```
+
 [HTML](examples/great-tables-solar-zenith.HTML){target="_blank"}
 :::
-::::
 :::::
-
+::::::
 
 ## Acting on Data (Pandas / Python)
 
 Applying colors and transparency based on data.
 
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
 ::: {.column width="50%" style="padding-top:2.2em"}
-![](images/pandas-acting-on-data.png){width=540}
+![](images/pandas-acting-on-data.png){width="540"}
 
 [Typst](examples/pandas-acting-on-data.pdf){target="_blank"}
 :::
+
 ::: {.column width="50%"}
 ```{=html}
-<iframe class="html-demo" src="demo/pandas-acting-on-data.html" width=600 height=580></iframe>
+<iframe class="html-demo" src="demo/pandas-acting-on-data.html" width=600 height=505 scrolling="no"></iframe>
 ```
+
 [HTML](examples/pandas-acting-on-data.HTML){target="_blank"}
 :::
-::::
 :::::
+::::::
 
-We can't wait to see what you do with this new feature!
+We can't wait to see what you do with this new feature!