feat(plugin-md-power): add full-width support for table container, close #740 (#741)

docs/en/guide/markdown/table.md

@@ -33,6 +33,8 @@ export default defineUserConfig({
         // Whether the table width is the max-content width
         // Inline elements will not wrap automatically; a scrollbar is displayed when the content exceeds the container width.
         maxContent: false,
+        // The table width defaults to occupying the entire row.
+        fullWidth: false,
         /**
          * Copy as HTML/Markdown
          * `true` is equivalent to `'all'`, enabling both HTML and Markdown copying.
@@ -82,6 +84,10 @@ Displays a copy button in the top-right corner of the table for copying as HTML
 Inline elements will not wrap automatically; a scrollbar is displayed when the content exceeds the container width.
 :::
 
+::: field name="fullWidth" type="boolean" optional default="false"
+The table width defaults to occupying the entire row.
+:::
+
 ::: field name="hl-rows" type="string" optional
 Configures row highlighting within the table.
 
@@ -208,6 +214,28 @@ Built-in `type` support: `tip`, `note`, `info`, `success`, `warning`, `danger`,
 
 :::
 
+**Input:**
+
+```md
+::: table full-width
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Row 2    | Data     | Info     |
+:::
+```
+
+**Output:**
+
+::: table full-width
+
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Row 2    | Data     | Info     |
+
+:::
+
 ### Table Row Highlighting
 
 **Input:**

docs/guide/markdown/table.md

@@ -31,6 +31,8 @@ export default defineUserConfig({
         // 表格宽度是否为最大内容宽度
         // 行内元素不再自动换行，超出容器宽度时表格显示滚动条
         maxContent: false,
+        // 表格宽度默认占据整行
+        fullWidth: false,
         /**
          * 复制为 html/markdown
          * true 相当于 `all`，相当于同时启用 html 和 markdown
@@ -80,6 +82,10 @@ export default defineUserConfig({
 行内元素不再自动换行，超出容器宽度时表格显示滚动条
 :::
 
+::: field name="fullWidth" type="boolean" optional default="false"
+表格宽度默认占据整行
+:::
+
 ::: field name="hl-rows" type="string" optional
 配置表格中的行高亮。
 
@@ -205,6 +211,28 @@ export default defineUserConfig({
 
 :::
 
+**输入：**
+
+```md
+::: table full-width
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Row 2    | Data     | Info     |
+:::
+```
+
+**输出：**
+
+::: table full-width
+
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Row 2    | Data     | Info     |
+
+:::
+
 ### 表格行高亮
 
 **输入：**

plugins/plugin-md-power/src/client/components/VPTable.vue

@@ -12,6 +12,8 @@ const props = defineProps<{
   copy?: false | 'all' | 'html' | 'md'
   /** 最大化内容 */
   maxContent?: boolean
+  /** 填充整行宽度 */
+  fullWidth?: boolean
   /** @internal */
   markdown?: string
 }>()
@@ -33,7 +35,7 @@ function onCopy(type: 'html' | 'md') {
 </script>
 
 <template>
-  <div class="vp-table" :class="{ [align || 'left']: true }">
+  <div class="vp-table" :class="{ [align || 'left']: true, full: fullWidth }">
     <div class="table-container">
       <div class="table-content">
         <div v-if="copy" class="table-toolbar">
@@ -144,6 +146,13 @@ function onCopy(type: 'html' | 'md') {
   width: max-content;
 }
 
+.vp-table.full,
+.vp-table.full .table-container,
+.vp-table.full .table-content,
+.vp-table.full .table-content table {
+  min-width: 100%;
+}
+
 /* -----  Highlight --------- */
 .vp-table table th.tip,
 .vp-table table td.tip,

plugins/plugin-md-power/src/node/container/table.ts

@@ -47,7 +47,7 @@ export interface TableContainerAttrs extends TableContainerOptions {
 export function tablePlugin(md: Markdown, options: TableContainerOptions = {}): void {
   createContainerSyntaxPlugin(md, 'table', (tokens, index, opt, env) => {
     const { hlCols = '', hlRows = '', hlCells = '', ...meta } = tokens[index].meta as TableContainerAttrs
-    const props = { copy: true, maxContent: false, ...options, ...meta } as TableContainerAttrs & { markdown?: string }
+    const props = { copy: true, maxContent: false, fullWidth: false, ...options, ...meta } as TableContainerAttrs & { markdown?: string }
     const content = tokens[index].content
 
     if (props.copy) {

plugins/plugin-md-power/src/shared/table.ts

@@ -28,4 +28,11 @@ export interface TableContainerOptions {
    * @default false
    */
   maxContent?: boolean
+
+  /**
+   * 表格宽度是否填充整行宽度
+   *
+   * @default false
+   */
+  fullWidth?: boolean
 }

theme/src/client/styles/content.css

@@ -207,7 +207,7 @@
  * Table
  * -------------------------------------------------------------------------- */
 .vp-doc table {
-  display: block;
+  display: table;
   margin: 20px 0;
   overflow-x: auto;
   border-collapse: collapse;