Fixing table css in lesson 10

Author: nsohail19

css/styles.css

@@ -77,7 +77,6 @@ main img,
   display: block;
   margin-left: auto;
   margin-right: auto;
-  /* Optional: vertical space above/below */
   margin-top: 1em;
   margin-bottom: 1em;
 }
@@ -181,11 +180,11 @@ img {
 }
 
 
-/* --- Styled Markdown Tables --- */
+/* --- Styled Tables --- */
 
+/* NOTE: do NOT force width: 100% here.
+   That breaks horizontal scrolling of very wide tables. */
 table {
-  /* Markdown tables: use full content width */
-  width: 100%;
   border-collapse: collapse;
   border: 1px solid #d0d0d0;      /* outer border */
   border-radius: 6px;
@@ -200,7 +199,7 @@ table th,
 table td {
   border: 1px solid #e5e5e5;      /* internal grid lines */
   padding: 0.55em 0.75em;
-  text-align: left;               /* make all table text left-aligned */
+  text-align: left;               /* left-align all table text */
 }
 
 table th {
@@ -209,18 +208,22 @@ table th {
   color: #333;
 }
 
-
-/* --- Crimson-Themed Table Headers (Markdown + kable + DT) --- */
-
+/* Crimson header row */
 table thead th {
   background: #a51c30 !important;     /* crimson */
   color: #ffffff !important;          /* white text */
   font-weight: 700 !important;        /* bold */
   border: 1px solid #8b1628 !important;  /* darker crimson border */
 }
 
+/* Markdown/Quarto tables: full content width only when inside Quarto's wrapper.
+   This avoids stretching Pandas DataFrames. */
+.quarto-table table:not(.dataframe) {
+  width: 100%;
+}
+
 
-/* Left align table captions generated by Quarto (no special background) */
+/* Captions left-aligned, no special background */
 .quarto-float-tbl .quarto-float-caption,
 .quarto-float .quarto-float-caption,
 table caption {
@@ -233,7 +236,8 @@ table caption {
 }
 
 
-/* Center Quarto figures and their contents */
+/* --- Figures --- */
+
 .quarto-figure,
 .figure,          /* your custom .figure block */
 figure {
@@ -275,8 +279,8 @@ figure figcaption {
 }
 
 
-/* Make Quarto columns stretch to equal height and center their content vertically
-   so images inside a column appear in the vertical middle of the column. */
+/* --- Columns Layout --- */
+
 .columns {
   display: flex !important;
   align-items: stretch !important; /* ensure columns match height */
@@ -293,27 +297,25 @@ figure figcaption {
 
 
 /* ----------------------------------------------------------
-   Wide Pandas tables (DataFrames):
-   - Let the table be as wide as it needs (many columns).
-   - Constrain the gray output box to the page width.
-   - Provide horizontal scroll inside that box.
+   Wide Pandas DataFrames:
+   - Gray output box constrained to page width.
+   - Inner DataFrame table can be wider.
+   - Horizontal scroll inside the box.
 -----------------------------------------------------------*/
 
-/* Constrain the output boxes and allow horizontal scroll */
-.cell-output,
+/* Constrain output boxes to content width and allow horizontal scroll */
 .cell-output-display {
-  max-width: 100%;
-  overflow-x: auto;        /* show horizontal scrollbar when table is wide */
+  max-width: 100% !important;
+  overflow-x: auto !important;
 }
 
-/* Pandas DataFrame tables: use intrinsic width, not forced 100% */
-table.dataframe {
-  width: auto !important;      /* don't stretch to 100% of container */
-  max-width: none !important;  /* allow width beyond container; scroll will handle it */
+/* Pandas DataFrame tables should use intrinsic width, not stretch */
+.cell-output-display table.dataframe {
+  width: auto !important;
+  max-width: none !important;
 }
 
-/* Some Pandas/Quarto variants wrap the dataframe in an extra div; handle those too */
-.cell-output-display > table.dataframe,
+/* Some variants wrap the dataframe in another div; handle those too */
 .cell-output-display > div > table.dataframe {
   width: auto !important;
   max-width: none !important;

docs/css/styles.css

@@ -77,7 +77,6 @@ main img,
   display: block;
   margin-left: auto;
   margin-right: auto;
-  /* Optional: vertical space above/below */
   margin-top: 1em;
   margin-bottom: 1em;
 }
@@ -181,11 +180,11 @@ img {
 }
 
 
-/* --- Styled Markdown Tables --- */
+/* --- Styled Tables --- */
 
+/* NOTE: do NOT force width: 100% here.
+   That breaks horizontal scrolling of very wide tables. */
 table {
-  /* Markdown tables: use full content width */
-  width: 100%;
   border-collapse: collapse;
   border: 1px solid #d0d0d0;      /* outer border */
   border-radius: 6px;
@@ -200,7 +199,7 @@ table th,
 table td {
   border: 1px solid #e5e5e5;      /* internal grid lines */
   padding: 0.55em 0.75em;
-  text-align: left;               /* make all table text left-aligned */
+  text-align: left;               /* left-align all table text */
 }
 
 table th {
@@ -209,18 +208,22 @@ table th {
   color: #333;
 }
 
-
-/* --- Crimson-Themed Table Headers (Markdown + kable + DT) --- */
-
+/* Crimson header row */
 table thead th {
   background: #a51c30 !important;     /* crimson */
   color: #ffffff !important;          /* white text */
   font-weight: 700 !important;        /* bold */
   border: 1px solid #8b1628 !important;  /* darker crimson border */
 }
 
+/* Markdown/Quarto tables: full content width only when inside Quarto's wrapper.
+   This avoids stretching Pandas DataFrames. */
+.quarto-table table:not(.dataframe) {
+  width: 100%;
+}
+
 
-/* Left align table captions generated by Quarto (no special background) */
+/* Captions left-aligned, no special background */
 .quarto-float-tbl .quarto-float-caption,
 .quarto-float .quarto-float-caption,
 table caption {
@@ -233,7 +236,8 @@ table caption {
 }
 
 
-/* Center Quarto figures and their contents */
+/* --- Figures --- */
+
 .quarto-figure,
 .figure,          /* your custom .figure block */
 figure {
@@ -275,8 +279,8 @@ figure figcaption {
 }
 
 
-/* Make Quarto columns stretch to equal height and center their content vertically
-   so images inside a column appear in the vertical middle of the column. */
+/* --- Columns Layout --- */
+
 .columns {
   display: flex !important;
   align-items: stretch !important; /* ensure columns match height */
@@ -293,27 +297,25 @@ figure figcaption {
 
 
 /* ----------------------------------------------------------
-   Wide Pandas tables (DataFrames):
-   - Let the table be as wide as it needs (many columns).
-   - Constrain the gray output box to the page width.
-   - Provide horizontal scroll inside that box.
+   Wide Pandas DataFrames:
+   - Gray output box constrained to page width.
+   - Inner DataFrame table can be wider.
+   - Horizontal scroll inside the box.
 -----------------------------------------------------------*/
 
-/* Constrain the output boxes and allow horizontal scroll */
-.cell-output,
+/* Constrain output boxes to content width and allow horizontal scroll */
 .cell-output-display {
-  max-width: 100%;
-  overflow-x: auto;        /* show horizontal scrollbar when table is wide */
+  max-width: 100% !important;
+  overflow-x: auto !important;
 }
 
-/* Pandas DataFrame tables: use intrinsic width, not forced 100% */
-table.dataframe {
-  width: auto !important;      /* don't stretch to 100% of container */
-  max-width: none !important;  /* allow width beyond container; scroll will handle it */
+/* Pandas DataFrame tables should use intrinsic width, not stretch */
+.cell-output-display table.dataframe {
+  width: auto !important;
+  max-width: none !important;
 }
 
-/* Some Pandas/Quarto variants wrap the dataframe in an extra div; handle those too */
-.cell-output-display > table.dataframe,
+/* Some variants wrap the dataframe in another div; handle those too */
 .cell-output-display > div > table.dataframe {
   width: auto !important;
   max-width: none !important;