fix(SQL 题): 列多的数据表横向滚动，不再把每一列挤成一两个字宽

原来表格固定占满左栏宽度，列一多、或者左栏拖窄，列名和值都折成好几行，对不上哪个值是
哪一列的。现在按内容撑开、至少占满一行，放不下就在表格里横向滚

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/problem/components/SQLDataTable.vue

@@ -10,34 +10,52 @@ defineProps<{
 </script>
 
 <template>
-  <n-table class="sqlTable" size="small" :single-line="false">
+  <!--
-    <thead>
+    列多的表横向滚动（设计文档第 8 节）。原来 n-table 固定占满宽度，列一多就把每一列
-      <tr>
+    挤成一两个字宽，列名和值都折成好几行，对不上哪个值是哪一列的
-        <th v-for="(col, i) in columns" :key="i">
+  -->
-          {{ col.name }}
+  <div class="sqlScroll">
-          <span v-if="col.type" class="colType">{{ col.type }}</span>
+    <n-table class="sqlTable" size="small" :single-line="false">
-        </th>
+      <thead>
-      </tr>
+        <tr>
-    </thead>
+          <th v-for="(col, i) in columns" :key="i">
-    <tbody>
+            {{ col.name }}
-      <tr v-if="rows.length === 0">
+            <span v-if="col.type" class="colType">{{ col.type }}</span>
-        <td :colspan="columns.length" class="nullCell">（空表）</td>
+          </th>
-      </tr>
+        </tr>
-      <tr v-for="(row, i) in rows" :key="i">
+      </thead>
-        <td v-for="(v, j) in row" :key="j" :class="{ nullCell: v === null }">
+      <tbody>
-          {{ v === null ? "NULL" : v }}
+        <tr v-if="rows.length === 0">
-        </td>
+          <td :colspan="columns.length" class="nullCell">（空表）</td>
-      </tr>
+        </tr>
-    </tbody>
+        <tr v-for="(row, i) in rows" :key="i">
-  </n-table>
+          <td v-for="(v, j) in row" :key="j" :class="{ nullCell: v === null }">
+            {{ v === null ? "NULL" : v }}
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
+  </div>
   <p v-if="truncated" class="truncNote">共 {{ totalRows }} 行，仅展示前 {{ rows.length }} 行</p>
 </template>
 
 <style scoped>
-.sqlTable {
+.sqlScroll {
+  overflow-x: auto;
   margin-bottom: 8px;
 }
 
+/* 按内容撑开、至少占满一行：列名和值都不折行，放不下就横向滚 */
+.sqlTable {
+  width: max-content;
+  min-width: 100%;
+}
+
+.sqlTable :deep(th),
+.sqlTable :deep(td) {
+  white-space: nowrap;
+}
+
 .colType {
   font-size: 12px;
   opacity: 0.55;