@state-of-geneva/rapports-bdd 1.0.11

package/404.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/logo.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rapports BDD</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/LICENSE

@@ -0,0 +1 @@
+This work is licensed under the Creative Commons Attribution 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.

package/README.md

@@ -0,0 +1,73 @@
+# Rapports BDD
+
+Une petite webapp Vue qui liste et affiche vos fichiers `.feature` Gherkin comme des rapports consultables par le métier.
+
+## Prérequis
+- Node.js >= 18
+
+## Utilisation (consommateur)
+Générez un site statique à partir de vos features.
+
+Sans installation préalable (recommandé pour un essai rapide):
+```sh
+npx @state-of-geneva/rapports-bdd@latest --features ./features --out ./dist
+# Optionnel si vous hébergez sous un sous-chemin
+npx @state-of-geneva/rapports-bdd@latest --features ./features --out ./dist --base /mon-sous-chemin/
+```
+
+Ou en tant que dépendance de dev:
+```sh
+npm i -D @state-of-geneva/rapports-bdd
+npx rapports-bdd --features ./features --out ./dist
+```
+
+- `--features`: dossier source contenant vos `.feature`
+- `--out`: dossier de sortie du site (ex: `dist`)
+- `--base`: base URL si la webapp est servie sous un sous‑chemin
+
+Important: la librairie ne contient ni features ni configuration « projet » — fournissez toujours `--features`.
+
+## Démarrer plus vite avec le template
+Le dépôt inclut un projet client prêt à l’emploi dans `template/`.
+
+- Guide rapide (GitHub): https://github.com/republique-et-canton-de-geneve/afc-rapports-bdd/tree/main/template
+- Exemples d’arborescences et détails: https://github.com/republique-et-canton-de-geneve/afc-rapports-bdd/blob/main/template/features/README.md
+
+Le template sépare clairement ses commandes de celles de la librairie. Exécutez ses commandes depuis le dossier `template/`.
+
+## Démo
+GitHub Pages: https://republique-et-canton-de-geneve.github.io/afc-rapports-bdd/
+
+## Organisation des features (résumé)
+Deux modes sont supportés côté client:
+- Multi‑projets (recommandé): `features/projects/<slug>/**/*.feature`
+- Dossier simple (slug inféré): `features/*.feature` (le slug = nom du dossier)
+
+## Configuration (rapports-bdd.config.json)
+Pour personnaliser les noms/catégories/masquages, placez un fichier dans `features/rapports-bdd.config.json` côté projet client. Référez‑vous aux exemples:
+- Doc: https://github.com/republique-et-canton-de-geneve/afc-rapports-bdd/blob/main/template/features/README.md
+- Exemple de config: https://github.com/republique-et-canton-de-geneve/afc-rapports-bdd/blob/main/template/features/rapports-bdd.config.json
+
+## Développement de la librairie (contributeurs)
+Ces commandes sont pour travailler sur la librairie elle‑même (ne pas confondre avec le template):
+
+```sh
+npm install
+npm run dev       # serveur Vite pour développer l’UI
+npm run build     # génère le paquet (utilise scripts/generateFeatureFiles.js)
+npm run lint
+```
+
+Notes:
+- Sans `FEATURES_DIR` (défini par le CLI), la génération produit des listes vides. C’est normal pour la librairie.
+- Pour tester la librairie en conditions réelles, utilisez le dossier `template/` et ses scripts dédiés.
+
+
+## Scripts de la librairie — à quoi servent-ils ?
+- dev: démarre Vite pour développer l’UI de la librairie (contributeurs).
+- build: enchaîne generate → build-only → postBuildCopy404. C’est la commande de référence utilisée par le CLI et la CI.
+- build-only: lance uniquement `vite build`. Utile pour les contributeurs quand les fichiers générés existent déjà.
+- generate: génère `src/generated/featureFiles.ts` et `src/generated/userConfig.ts` à partir de `FEATURES_DIR` (défini par le CLI). Sans `FEATURES_DIR`, génère des listes vides — c’est normal pour la librairie.
+- preview: non fourni au niveau de la librairie (le code ne contient aucune feature). Utilisez le dossier `template/` (projet client) et son `npm run preview` pour voir un site réel.
+
+Note: un hook `prepublishOnly` construit automatiquement le paquet avant `npm publish`.

package/bin/rapports-bdd.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/* eslint-env node */
+import { spawnSync } from 'child_process'
+import path from 'path'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const pkgRoot = path.resolve(__dirname, '..')
+
+function getArgValue(flag) {
+  const index = process.argv.indexOf(flag)
+  return index !== -1 ? process.argv[index + 1] : undefined
+}
+
+const featuresPath = getArgValue('--features')
+if (featuresPath) {
+  const resolvedFeatures = path.resolve(process.cwd(), featuresPath)
+  if (fs.existsSync(resolvedFeatures)) {
+    process.env.FEATURES_DIR = resolvedFeatures
+  } else {
+    console.warn(`[rapports-bdd] Features directory not found: ${resolvedFeatures}. Falling back to default public assets.`)
+  }
+}
+
+const outDir = getArgValue('--out')
+if (outDir) {
+  process.env.OUT_DIR = path.resolve(process.cwd(), outDir)
+}
+
+const basePath = getArgValue('--base')
+if (basePath) {
+  process.env.BASE_PATH = basePath
+}
+
+console.log(`[rapports-bdd] Using FEATURES_DIR="${process.env.FEATURES_DIR ?? ''}", OUT_DIR="${process.env.OUT_DIR ?? ''}", BASE_PATH="${process.env.BASE_PATH ?? ''}"`)
+const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm'
+const result = spawnSync(npmCmd, ['run', 'build'], { stdio: 'inherit', cwd: pkgRoot, env: { ...process.env }, shell: true })
+if (result.error) {
+  console.error(`[rapports-bdd] Failed to run build: ${result.error.message}`)
+}
+process.exit(result.status ?? 1)

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/logo.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rapports BDD</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@state-of-geneva/rapports-bdd",
+  "version": "1.0.11",
+  "type": "module",
+  "bin": {
+    "rapports-bdd": "./bin/rapports-bdd.js"
+  },
+  "files": [
+    "bin",
+    "scripts",
+    "src",
+    "index.html",
+    "404.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "tsconfig.app.json",
+    "tsconfig.node.json"
+  ],
+  "license": "CC-BY-4.0",
+  "description": "CLI + Vue app to render Gherkin .feature files as browsable reports (library only, no features inside)",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run generate && npm run build-only && node scripts/postBuildCopy404.js",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/",
+    "generate": "node scripts/generateFeatureFiles.js",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@cucumber/cucumber-json-converter": "^0.1.0",
+    "@cucumber/gherkin": "^28.0.0",
+    "@primevue/themes": "^4.0.0",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.0.0",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "vite": "^5.3.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.14.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "npm-run-all2": "^6.2.0",
+    "prettier": "^3.2.5",
+    "typescript": "~5.4.0",
+    "vite-plugin-vue-devtools": "^7.3.1",
+    "vue-tsc": "^2.0.21"
+  }
+}

package/scripts/generateFeatureFiles.js

@@ -0,0 +1,134 @@
+/* eslint-env node */
+import { fileURLToPath } from 'url'
+import path, { dirname } from 'path'
+import fs from 'fs'
+
+// Recréer __dirname en utilisant import.meta.url
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const BASE_PATH = process.env.BASE_PATH || '/'
+const basePrefix = BASE_PATH === '/' ? '' : BASE_PATH.replace(/\/$/, '')
+
+// Fonction pour parcourir les fichiers .feature
+function findFeatureFiles(dir, baseDir, slugIfNoProjects) {
+  let results = []
+
+  // Si le dossier n'existe pas, retourner une liste vide
+  if (!fs.existsSync(dir)) {
+    return results
+  }
+
+  fs.readdirSync(dir).forEach((file) => {
+    const filePath = path.join(dir, file)
+    const stat = fs.statSync(filePath)
+
+    if (stat && stat.isDirectory()) {
+      // Récursion pour les sous-dossiers
+      results = results.concat(findFeatureFiles(filePath, baseDir, slugIfNoProjects))
+    } else if (filePath.endsWith('.feature')) {
+      // Générer un chemin relatif basé sur `baseDir`
+      const relativePath = '/' + path.relative(baseDir, filePath).replace(/\\/g, '/')
+      // Si le chemin ne commence pas par /projects/, et qu'on a un slug fourni,
+      // préfixer par /projects/<slug>
+      const needsProjectsPrefix = !relativePath.startsWith('/projects/') && !!slugIfNoProjects
+      const adjustedRelative = needsProjectsPrefix
+        ? `/projects/${slugIfNoProjects}${relativePath}`
+        : relativePath
+      const fullPath = basePrefix + adjustedRelative
+      results.push(fullPath)
+    }
+  })
+
+  return results
+}
+
+function findFeatureSlugs(featureFiles) {
+  return [...new Set(
+    featureFiles.map((featureFile) => {
+      const prefixPattern = basePrefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      const regex = new RegExp(`^${prefixPattern}/projects/([^/]+)`) // capture le slug après /projects/
+      const match = featureFile.match(regex)
+      return match ? match[1] : null
+    }).filter(slug => slug !== null)
+  )]
+}
+
+// Fonction pour générer le(s) fichier(s) ts
+function generateFiles() {
+  // Définir le chemin du répertoire et des fichiers générés
+  const outputDirPath = path.join(__dirname, '../src/generated/')
+  const featureFilesTsPath = path.join(outputDirPath, 'featureFiles.ts')
+  const userConfigTsPath = path.join(outputDirPath, 'userConfig.ts')
+
+  // Vérifier si le répertoire existe, sinon le créer
+  if (!fs.existsSync(outputDirPath)) {
+    fs.mkdirSync(outputDirPath, { recursive: true })
+  }
+
+  const inputDirPath = process.env.FEATURES_DIR
+    ? path.resolve(process.env.FEATURES_DIR)
+    : null
+
+  // If no FEATURES_DIR was provided or directory is missing, generate empty datasets
+  if (!inputDirPath || !fs.existsSync(inputDirPath)) {
+    const featureFilesData = '//generated by generate-feature-list plugin\n' +
+      'export const FEATURE_FILES = []\n\n' +
+      'export const FEATURE_SLUGS = []'
+    fs.writeFileSync(featureFilesTsPath, featureFilesData)
+    const userConfigTs = '//generated by generate-feature-list plugin\n' +
+      'export const USER_TRANSLATIONS = []\n' +
+      'export const USER_DEFAULT_CATEGORY = null\n' +
+      'export const USER_IGNORED_SLUGS = []\n'
+    fs.writeFileSync(userConfigTsPath, userConfigTs)
+    console.log('[generateFeatureFiles] No FEATURES_DIR set; generated empty lists.')
+    return
+  }
+
+  const hasProjectsSubfolder = fs.existsSync(path.join(inputDirPath, 'projects'))
+  const slugIfNoProjects = hasProjectsSubfolder ? undefined : path.basename(path.resolve(inputDirPath))
+
+  // 1) Générer les listes de features et slugs
+  const featureFiles = findFeatureFiles(inputDirPath, inputDirPath, slugIfNoProjects)
+  const featureSlugs = findFeatureSlugs(featureFiles)
+  const featureFilesData = '//generated by generate-feature-list plugin\n' +
+    'export const FEATURE_FILES = ' + JSON.stringify(featureFiles, null, 2) + '\n\n' +
+    'export const FEATURE_SLUGS = ' + JSON.stringify(featureSlugs, null, 2)
+  fs.writeFileSync(featureFilesTsPath, featureFilesData)
+  console.log(`Feature files list generated: ${featureFilesTsPath}`)
+
+  // 2) Générer un fichier de config utilisateur optionnel (userConfig.ts)
+  // Recherche d'un fichier rapports-bdd.config.json au niveau du répertoire des features
+  let userTranslations = []
+  let userDefaultCategory = null
+  let userIgnoredSlugs = []
+  try {
+    const configJsonPath = path.join(inputDirPath, 'rapports-bdd.config.json')
+    if (fs.existsSync(configJsonPath)) {
+      const raw = fs.readFileSync(configJsonPath, 'utf-8')
+      const parsed = JSON.parse(raw)
+      if (parsed && typeof parsed === 'object') {
+        if (Array.isArray(parsed.translations)) {
+          userTranslations = parsed.translations
+        }
+        if (typeof parsed.defaultCategory === 'string') {
+          userDefaultCategory = parsed.defaultCategory
+        }
+        if (Array.isArray(parsed.ignoredSlugs)) {
+          userIgnoredSlugs = parsed.ignoredSlugs
+        }
+      }
+    }
+  } catch (e) {
+    console.warn(`[generateFeatureFiles] Warning while reading rapports-bdd.config.json: ${e?.message || e}`)
+  }
+
+  const userConfigTs = '//generated by generate-feature-list plugin\n' +
+    'export const USER_TRANSLATIONS = ' + JSON.stringify(userTranslations, null, 2) + '\n' +
+    'export const USER_DEFAULT_CATEGORY = ' + JSON.stringify(userDefaultCategory) + '\n' +
+    'export const USER_IGNORED_SLUGS = ' + JSON.stringify(userIgnoredSlugs, null, 2) + '\n'
+  fs.writeFileSync(userConfigTsPath, userConfigTs)
+  console.log(`User config generated: ${userConfigTsPath}`)
+}
+
+generateFiles()

package/scripts/postBuildCopy404.js

@@ -0,0 +1,73 @@
+/* eslint-env node */
+import { fileURLToPath } from 'url'
+import path, { dirname } from 'path'
+import fs from 'fs'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// Determine the actual output directory used by Vite
+const outDirEnv = process.env.OUT_DIR
+const outDir = outDirEnv ? path.resolve(outDirEnv) : path.resolve(__dirname, '../dist')
+
+try {
+  const indexPath = path.join(outDir, 'index.html')
+  const targetPath = path.join(outDir, '404.html')
+
+  if (fs.existsSync(indexPath)) {
+    // Ensure directory exists (Vite should have created it already)
+    fs.copyFileSync(indexPath, targetPath)
+    console.log(`[postBuildCopy404] Copied: ${indexPath} -> ${targetPath}`)
+  } else {
+    console.log(`[postBuildCopy404] index.html not found in ${outDir}. Skipping 404.html copy.`)
+  }
+} catch (err) {
+  console.warn(`[postBuildCopy404] Warning: ${err?.message || err}`)
+  // Do not fail the build because of this convenience step
+}
+
+// Additional step: when FEATURES_DIR is a plain folder (no 'projects' subfolder),
+// Vite places .feature files at the root of dist (keeping their relative paths).
+// The app expects them under /projects/<slug>/. Mirror them accordingly.
+try {
+  const featuresDirEnv = process.env.FEATURES_DIR ? path.resolve(process.env.FEATURES_DIR) : undefined
+  if (featuresDirEnv && fs.existsSync(featuresDirEnv)) {
+    const hasProjectsSubfolder = fs.existsSync(path.join(featuresDirEnv, 'projects'))
+    if (!hasProjectsSubfolder) {
+      const slug = path.basename(path.resolve(featuresDirEnv))
+      const distProjectsSlugDir = path.join(outDir, 'projects', slug)
+
+      // Recursively walk FEATURES_DIR to find all .feature files and mirror them into dist/projects/<slug>
+      const walk = (dir, baseDir) => {
+        const entries = fs.readdirSync(dir)
+        for (const entry of entries) {
+          const fullPath = path.join(dir, entry)
+          const stat = fs.statSync(fullPath)
+          if (stat.isDirectory()) {
+            walk(fullPath, baseDir)
+          } else if (fullPath.endsWith('.feature')) {
+            const relative = path.relative(baseDir, fullPath)
+            const srcInDist = path.join(outDir, relative)
+            const destInDist = path.join(distProjectsSlugDir, relative)
+            const destDir = path.dirname(destInDist)
+            if (!fs.existsSync(destDir)) {
+              fs.mkdirSync(destDir, { recursive: true })
+            }
+            if (fs.existsSync(srcInDist)) {
+              fs.copyFileSync(srcInDist, destInDist)
+              console.log(`[postBuildCopy404] Mirrored feature: ${srcInDist} -> ${destInDist}`)
+            } else {
+              // If vite didn't copy the source (e.g., different publicDir structure), skip silently
+              // to avoid failing the build.
+              // console.log(`[postBuildCopy404] Source not found in dist, skipping: ${srcInDist}`)
+            }
+          }
+        }
+      }
+
+      walk(featuresDirEnv, featuresDirEnv)
+    }
+  }
+} catch (err) {
+  console.warn(`[postBuildCopy404] Mirroring warning: ${err?.message || err}`)
+}

package/src/App.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <div id="app-container">
+    <header>
+      <h1>Rapports BDD</h1>
+    </header>
+    <main>
+      <RouterView />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+#app-container {
+  display: grid;
+  grid-auto-rows: auto 1fr;
+  grid-template-areas:
+    'header'
+    'main';
+  min-height: 100vh;
+}
+
+header {
+  grid-area: header;
+  color: var(--primary);
+  background-color: var(--accent);
+  text-align: center;
+}
+
+main {
+  grid-area: main;
+  color: var(--secondary);
+  background-color: var(--primary);
+}
+</style>

package/src/assets/consts.ts

@@ -0,0 +1,24 @@
+import type CucumberReportProject from '@/models/cucumber-report-project'
+import { FEATURE_SLUGS } from '@/generated/featureFiles'
+import { USER_TRANSLATIONS, USER_DEFAULT_CATEGORY, USER_IGNORED_SLUGS } from '@/generated/userConfig'
+
+// Library must stay generic: no built-in project-specific ignores
+const BUILTIN_IGNORED_SLUGS: string[] = []
+const CATEGORIE_PAR_DEFAUT = USER_DEFAULT_CATEGORY ?? 'Orphelins'
+
+const USER_TRANSLATIONS_TYPED: CucumberReportProject[] = USER_TRANSLATIONS as unknown as CucumberReportProject[]
+const ALL_IGNORED = [...BUILTIN_IGNORED_SLUGS, ...USER_IGNORED_SLUGS]
+
+const CUCUMBER_REPORTS: CucumberReportProject[] = FEATURE_SLUGS
+  .filter((slug) => !ALL_IGNORED.includes(slug))
+  .map((slug) => {
+    const translation = USER_TRANSLATIONS_TYPED.find((cucumberReport) => cucumberReport.slug === slug)
+    if (translation) {
+      return translation
+    } else {
+      return { name: slug, slug, categorie: CATEGORIE_PAR_DEFAUT }
+    }
+  })
+  .sort((a, b) => a.name.localeCompare(b.name))
+
+export { CUCUMBER_REPORTS }

package/src/assets/main.css

@@ -0,0 +1,18 @@
+:root {
+  --primary: #eff0f0;
+  --secondary: #173647;
+  --accent: #1dbb68;
+}
+
+#app,
+body,
+html {
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+.p-tree-node-toggle-button {
+  align-self: start;
+}

package/src/components/CucumberExamples.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="example" v-for="example in examples" :key="example.id">
+
+    <div class="title">
+      <b>{{ example.keyword }}: </b> {{ example.name }}
+    </div>
+    <table>
+      <thead v-if="example.tableHeader">
+      <tr>
+        <th v-for="cell in example.tableHeader.cells" :key="cell.value">
+          {{cell.value}}
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="row in example.tableBody" :key="row.id">
+        <td v-for="cell in row.cells" :key="cell.value">
+          {{cell.value}}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import * as Messages from '@cucumber/messages'
+defineProps({
+  examples: {
+    type: Object as PropType<Array<Messages.Examples>>,
+    required: true,
+  },
+});
+</script>
+<style scoped>
+.title{
+  padding-bottom: 5px;
+}
+.example{
+  padding-top: 10px;
+}
+table {
+  display: table;
+  border-collapse: separate;
+  box-sizing: border-box;
+  text-indent: initial;
+  unicode-bidi: isolate;
+  border-spacing: 2px;
+  border-color: gray;
+}
+
+tr {
+  display: table-row;
+  vertical-align: inherit;
+  unicode-bidi: isolate;
+  border-color: inherit;
+}
+
+td, th {
+  padding: .4em .6em;
+  border-width: 0 2px 0 0;
+  border-style: solid;
+  border-color: #000080;
+  color: #297bde;
+}
+
+td:first-child, th:first-child {
+  border-width: 0 2px;
+}
+</style>

package/src/components/CucumberSteps.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="step" v-for="step in steps" :key="step.id">
+
+    <div class="title">
+    <b>{{ step.keyword }}</b> {{ step.text }}
+    </div>
+    <table v-if="step.dataTable">
+      <tbody>
+      <tr v-for="(row, rowIndex) in step.dataTable.rows" :key="row.id ?? rowIndex">
+        <td v-for="(cell, cellIndex) in row.cells" :key="cell.value ?? cellIndex">
+          {{cell.value}}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import * as Messages from '@cucumber/messages'
+defineProps({
+  steps: {
+    type: Object as PropType<Array<Messages.Step>>,
+    required: true,
+  },
+});
+</script>
+<style scoped>
+
+.step {
+  padding-left: 20px;
+}
+
+table {
+  display: table;
+  border-collapse: separate;
+  box-sizing: border-box;
+  text-indent: initial;
+  unicode-bidi: isolate;
+  border-spacing: 2px;
+  border-color: gray;
+}
+
+tr {
+  display: table-row;
+  vertical-align: inherit;
+  unicode-bidi: isolate;
+  border-color: inherit;
+}
+
+td, th {
+  padding: .4em .6em;
+  border-width: 0 2px 0 0;
+  border-style: solid;
+  border-color: #000080;
+  color: #297bde;
+}
+
+td:first-child, th:first-child {
+  border-width: 0 2px;
+}
+</style>