User:Horblegorble/Sandbox/CollapsibleRow: Difference between revisions

Content added Content deleted

VisualWikitext

Inline

Revision as of 11:26, 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%

Armor

1

40.00%

Steel Armor	01-01	20.00%
Steel Cuirass		6.67%
Steel Shoulders		6.67%
Steel Chausses		6.67%

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

Scale Armor	1	10%
Scale Chestpiece		3.33%
Scale Shoulderguards		3.33%
Scale Leggings		3.33%

Coconut

2-4

10%

(Old) Minotaur Mockup

Item

Quantity

Rarity

Material	*	15.4%
Sunsilk	1-3	3.85%
Dragon Scale	3-8	3.85%
Orichalcum Ingot	1-3	3.85%
Eldwood Logs	2-6	3.85%

Carcanet of Wrath

1

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 52: / Line 52: @@
     <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_Apple.png|32px]]</div>
+        <div style="width=10%; padding-left:0.8em;">[[Image:veloren_Apple.png|32px]]</div>
-        <div style="width=10%; padding-left:0.5em;">[[Apple]]</div>
+        <div style="width=90%; padding-left:0.5em;">[[Apple]]</div>
       </div>
     </td>
@@ Line 64: / Line 64: @@
       <table class="wikitable mw-collapsible" data-expandtext="+" data-collapsetext="-" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
         <tr>
-          <td width=52% style="padding-left:1em;">Armor</td>
+          <td width=52% style="padding-left:1em;"><b>Armor</b></td>
-          <td width=19% style="padding-left:1em;">1</td>
+          <td width=19% style="padding-left:1em;"><b>1</b></td>
-          <td width=29% style="padding-left:1em;" class="rarity-green">40.00%</td>
+          <td width=29% style="padding-left:1em;" class="rarity-green"><b>40.00%</b></td>
         </tr>
         <tr>
@@ Line 74: / Line 74: @@
                 <td witdth=52%>
                   <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-                    <div style="width=90%;">[[File:Veloren Steel Armor Set.png|32px|link=]]</div>
+                    <div style="width=10%;">[[File:Veloren Steel Armor Set.png|32px|link=]]</div>
-                    <div style="width=10%; padding-left:0.5em;"><b>[[Steel Armor]]</b></div>
+                    <div style="width=90%; padding-left:0.5em;"><b>[[Steel Armor]]</b></div>
                 </td>
                 <td width=20% style="padding-left:1em;"><b>01-01</b></td>
@@ Line 83: / Line 83: @@
                 <td colspan=2>
                   <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-                    <div style="width=90%;">[[Image:veloren_Steel_Cuirass.png|32px]]</div>
+                    <div style="width=10%;">[[Image:veloren_Steel_Cuirass.png|32px]]</div>
-                    <div style="width=10%; padding-left:0.5em;">[[Steel Cuirass]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Steel Cuirass]]</div>
                   </div>
                 </td>
@@ Line 92: / Line 92: @@
                 <td colspan=2>
                   <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-                    <div style="width=90%;">[[Image:veloren_Steel_Shoulders.png|32px]]</div>
+                    <div style="width=10%;">[[Image:veloren_Steel_Shoulders.png|32px]]</div>
-                    <div style="width=10%; padding-left:0.5em;">[[Steel Shoulders]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Steel Shoulders]]</div>
                   </div>
                 </td>
@@ Line 101: / Line 101: @@
                 <td colspan=2>
                   <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-                    <div style="width=90%;">[[Image:veloren_Steel_Chausses.png|32px]]</div>
+                    <div style="width=10%;">[[Image:veloren_Steel_Chausses.png|32px]]</div>
-                    <div style="width=10%; padding-left:0.5em;">[[Steel Chausses]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Steel Chausses]]</div>
                   </div>
                 </td>
@@ Line 117: / Line 117: @@
                 <td witdth=52%>
                   <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-                    <div style="width=90%;">[[File:Veloren Silken Armor Set.png|32px|link=]]</div>
+                    <div style="width=10%;">[[File:Veloren Silken Armor Set.png|32px|link=]]</div>
-                    <div style="width=10%; padding-left:0.5em;"><b>[[Silken Armor]]</b></div>
+                    <div style="width=90%; padding-left:0.5em;"><b>[[Silken Armor]]</b></div>
                   </div>
                 </td>
@@ Line 127: / Line 127: @@
                 <td colspan=2>
                   <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-                    <div style="width=90%;">[[Image:veloren_Silken_Robe.png|32px]]</div>
+                    <div style="width=10%;">[[Image:veloren_Silken_Robe.png|32px]]</div>
-                    <div style="width=10%; padding-left:0.5em;">[[Silken Robe]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Silken Robe]]</div>
                   </div>
                 </td>
@@ Line 136: / Line 136: @@
                 <td colspan=2>
                   <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-                    <div style="width=90%;">[[Image:veloren_Silken_Shoulders.png|32px]]</div>
+                    <div style="width=10%;">[[Image:veloren_Silken_Shoulders.png|32px]]</div>
-                    <div style="width=10%; padding-left:0.5em;">[[Silken Shoulders]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Silken Shoulders]]</div>
                   </div>
                 </td>
@@ Line 145: / Line 145: @@
                 <td colspan=2>
                   <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-                    <div style="width=90%;">[[Image:veloren_Silken_Skirt.png|32px]]</div>
+                    <div style="width=10%;">[[Image:veloren_Silken_Skirt.png|32px]]</div>
-                    <div style="width=10%; padding-left:0.5em;">[[Silken Skirt]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Silken Skirt]]</div>
                   </div>
                 </td>
@@ Line 165: / Line 165: @@
         <td witdth=52%>
           <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[File:Veloren Scale Armor Set.png|32px|link=]]</div>
+            <div style="width=10%;">[[File:Veloren Scale Armor Set.png|32px|link=]]</div>
-            <div style="width=10%; padding-left:0.5em;"><b>[[Scale Armor]]</b></div>
+            <div style="width=90%; padding-left:0.5em;"><b>[[Scale Armor]]</b></div>
           </div>
         </td>
@@ Line 175: / Line 175: @@
         <td colspan=2>
           <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Scale_Chestpiece.png|32px]]</div>
+            <div style="width=10%;">[[Image:veloren_Scale_Chestpiece.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Scale Chestpiece]]</div>
+            <div style="width=90%; padding-left:0.5em;">[[Scale Chestpiece]]</div>
           </div>
         </td>
@@ Line 184: / Line 184: @@
         <td colspan=2>
           <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Scale_Shoulderguards.png|32px]]</div>
+            <div style="width=10%;">[[Image:veloren_Scale_Shoulderguards.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Scale Shoulderguards]]</div>
+            <div style="width=90%; padding-left:0.5em;">[[Scale Shoulderguards]]</div>
           </div>
         </td>
@@ Line 193: / Line 193: @@
         <td colspan=2>
           <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Scale_Leggings.png|32px]]</div>
+            <div style="width=10%;">[[Image:veloren_Scale_Leggings.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Scale Leggings]]</div>
+            <div style="width=90%; padding-left:0.5em;">[[Scale Leggings]]</div>
           </div>
         </td>
@@ Line 206: / Line 206: @@
     <td>
       <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <div style="width=90%; padding-left:1em;">[[Image:veloren_Coconut.png|32px]]</div>
+        <div style="width=10%; padding-left:1em;">[[Image:veloren_Coconut.png|32px]]</div>
-        <div style="width=10%; padding-left:0.5em;">[[Coconut]]</div>
+        <div style="width=90%; padding-left:0.5em;">[[Coconut]]</div>
       </div>
     </td>