User:Horblegorble/Sandbox/CollapsibleRow: Difference between revisions

Content added Content deleted

VisualWikitext

Inline

Revision as of 08:29, 8 August 2023

Original

copied from https://www.mediawiki.org/wiki/Manual:Collapsible_elements ('translate' elements removed)

Inside another element

You can also use collapsible elements in other elements, such as a table.

My table with collapsible info

Title

Sample

Lorem

Ipsum

More info

Number	Letter
1	A
2	B
3	C

Horblegorble's Loot Experiment

Item

Quantity

Rarity

Apple

1

60%

Steel Armor	1	20%
Steel Cuirass		3.33%
Steel Shoulders		3.33%
Steel Chausses		3.33%

Silken Armor	1	20%
Silken Robe		6.67%
Silken Shoulders		6.67%
Silken Skirt		6.67%

Coconut

2-4

10%

Minotaur Mockup

Item

Quantity

Rarity

Carcanet of Wrath

1

3.85%

Sunsilk

1-3

3.85%

Dragon Scale

3-8

3.85%

Orichalcum Ingot

1-3

3.85%

Eldwood Logs

2-6

3.85%

Orichalcum Armor	1	3.33%
Orichalcum Chestguard		0.48%
Orichalcum Mantle		0.48%
Orichalcum Legplates		0.48%
Orichalcum Cape		0.48%
Orichalcum Gloves		0.48%
Orichalcum Belt		0.48%
Orichalcum Warboots		0.48%

Dragonscale Armor	1	3.33%
Dragonscale Chestplate		0.48%
Dragonscale Mantle		0.48%
Dragonscale Leggings		0.48%
Dragonscale Cape		0.48%
Dragonscale Gloves		0.48%
Dragonscale Sash		0.48%
Dragonscale Spurs		0.48%

Sunsilk Armor	1	3.33%
Sunsilk Tunic		0.48%
Sunsilk Shoulderwraps		0.48%
Sunsilk Kilt		0.48%
Sunsilk Cape		0.48%
Sunsilk Handwraps		0.48%
Sunsilk Sash		0.48%
Sunsilk Footwraps		0.48%

Caladbolg

1

1.28%

Mjolnir

1

1.28%

Parashu

1

1.28%

@@ Line 155: / Line 155: @@
     <td>2-4</td>
     <td style="padding-left:0.8em;">10%</td>
+  </tr>
+</table>
+=== Minotaur Mockup ===
+<table class="wikitable sortable" style="text-align:left;" cellpadding="2" cellspacing="0" width=fit>
+  <tr>
+    <th width=55%>Item</th>
+    <th width=20%>Quantity</th>
+    <th width=25%>Rarity</th>
+  </tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Carcanet_of_Wrath.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Carcanet of Wrath]]</div>
+      </div>
+    </td>
+    <td>1</td>
+    <td style="padding-left:0.8em;">3.85%</td>
+  </tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Sunsilk.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Sunsilk]]</div>
+      </div>
+    </td>
+    <td>1-3</td>
+    <td style="padding-left:0.8em;">3.85%</td>
+  </tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Dragon_Scale.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Dragon Scale]]</div>
+      </div>
+    </td>
+    <td>3-8</td>
+    <td style="padding-left:0.8em;">3.85%</td>
+  </tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Orichalcum_Ingot.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Orichalcum Ingot]]</div>
+      </div>
+    </td>
+    <td>1-3</td>
+    <td style="padding-left:0.8em;">3.85%</td>
+  </tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Eldwood_Logs.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Eldwood Logs]]</div>
+      </div>
+    </td>
+    <td>2-6</td>
+    <td style="padding-left:0.8em;">3.85%</td>
+  </tr>
+  <tr>
+    <td colspan=3>
+      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+        <tr>
+          <td witdth=55%>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[File:Veloren Orichalcum Armor Set.png|32px|link=]]</div>
+              <div style="width=10%; padding-left:0.5em;"><b>[[Orichalcum Armor]]</b></div>
+            </div>
+          </td>
+          <td width=21% style="padding-left:1em;"><b>1</b></td>
+          <td width=24% style="padding-left:1em;"><b>3.33%</b></td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Orichalcum_Chestguard.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Orichalcum Chestguard]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Orichalcum_Mantle.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Orichalcum Mantle]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Orichalcum_Legplates.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Orichalcum Legplates]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Orichalcum_Cape.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Orichalcum Cape]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Orichalcum_Gloves.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Orichalcum Gloves]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Orichalcum_Belt.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Orichalcum Belt]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Orichalcum_Warboots.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Orichalcum Warboots]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+      </table>
+    </td>
+  <tr>
+  <tr>
+    <td colspan=3>
+      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+        <tr>
+          <td witdth=55%>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[File:Veloren Dragonscale Armor Set.png|32px|link=]]</div>
+              <div style="width=10%; padding-left:0.5em;"><b>[[Dragonscale Armor]]</b></div>
+            </div>
+          </td>
+          <td width=21% style="padding-left:1em;"><b>1</b></td>
+          <td width=24% style="padding-left:1em;"><b>3.33%</b></td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Dragonscale_Chestplate.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Dragonscale Chestplate]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Dragonscale_Mantle.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Dragonscale Mantle]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Dragonscale_Leggings.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Dragonscale Leggings]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Dragonscale_Cape.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Dragonscale Cape]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Dragonscale_Gloves.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Dragonscale Gloves]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Dragonscale_Sash.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Dragonscale Sash]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Dragonscale_Spurs.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Dragonscale Spurs]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+      </table>
+    </td>
+  <tr>
+  <tr>
+    <td colspan=3>
+      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+        <tr>
+          <td witdth=55%>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[File:Veloren Sunsilk Armor Set.png|32px|link=]]</div>
+              <div style="width=10%; padding-left:0.5em;"><b>[[Sunsilk Armor]]</b></div>
+            </div>
+          </td>
+          <td width=21% style="padding-left:1em;"><b>1</b></td>
+          <td width=24% style="padding-left:1em;"><b>3.33%</b></td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Sunsilk_Tunic.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Sunsilk Tunic]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Sunsilk_Shoulderwraps.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Sunsilk Shoulderwraps]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Sunsilk_Kilt.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Sunsilk Kilt]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Sunsilk_Cape.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Sunsilk Cape]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Sunsilk_Handwraps.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Sunsilk Handwraps]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Sunsilk_Sash.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Sunsilk Sash]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+       <tr>
+          <td colspan=2>
+            <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+              <div style="width=90%;">[[Image:veloren_Sunsilk_Footwraps.png|32px]]</div>
+              <div style="width=10%; padding-left:0.5em;">[[Sunsilk Footwraps]]</div>
+            </div>
+          </td>
+          <td style="padding-left:1em;">0.48%</td>
+        </tr>
+      </table>
+    </td>
+  <tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Caladbolg.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Caladbolg]]</div>
+      </div>
+    </td>
+    <td>1</td>
+    <td style="padding-left:0.8em;">1.28%</td>
+  </tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Mjolnir.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Mjolnir]]</div>
+      </div>
+    </td>
+    <td>1</td>
+    <td style="padding-left:0.8em;">1.28%</td>
+  </tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Parashu.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Parashu]]</div>
+      </div>
+    </td>
+    <td>1</td>
+    <td style="padding-left:0.8em;">1.28%</td>
   </tr>