User:Horblegorble/Sandbox/CollapsibleRow: Difference between revisions

Content added Content deleted

VisualWikitext

Inline

Revision as of 07:47, 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%

@@ Line 39: / Line 39: @@
 == Horblegorble's Loot Experiment ==
-<table class="wikitable sortable" style="text-align:center;" cellpadding="2" cellspacing="0" width=fit>
+<table class="wikitable sortable" style="text-align:left;" cellpadding="2" cellspacing="0" width=fit>
   <tr>
-    <th width=50%>Item</th>
+    <th width=55%>Item</th>
-    <th width=25%>Quantity</th>
+    <th width=20%>Quantity</th>
     <th width=25%>Rarity</th>
   </tr>
   <tr>
+    <td>
-    <td>[[Image:veloren_Apple.png|32px]] [[Apple]]</td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-    <td>1</td>
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Apple.png|32px]]</div>
-    <td>60%</td>
+        <div style="width=10%; padding-left:0.5em;">[[Apple]]</div>
+      </div>
+    </td>
+    <td style="padding-left:1em;">1</td>
+    <td style="padding-left:0.8em;">60%</td>
   </tr>
   <tr>
     <td colspan=3>
-      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:center;" cellpadding="0" cellspacing="0" width=100%>
+      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
       <tr>
+        <td witdth=55%>
-        <td width=50% style="text-align:center;"><b>[[File:Veloren Steel Armor Set.png|32px|link=]] [[Steel Armor]]</b></th>
-        <td width=25% style="text-align:center;"><b>1</b></th>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <td width=25% style="text-align:center;"><b>10%</b></th>
+            <div style="width=90%;">[[File:Veloren Steel Armor Set.png|32px|link=]]</div>
+            <div style="width=10%; padding-left:0.5em;"><b>[[Steel Armor]]</b></div>
+          </div>
+        </td>
+        <td width=21% style="padding-left:1em;"><b>1</b></td>
+        <td width=24% style="padding-left:1em;"><b>20%</b></td>
       </tr>
       <tr>
-        <td colspan=2>[[Image:veloren_Steel_Cuirass.png|32px]] [[Steel Cuirass]]</td>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <td>3.33%</td>
+            <div style="width=90%;">[[Image:veloren_Steel_Cuirass.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Steel Cuirass]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">3.33%</td>
       </tr>
       <tr>
-        <td colspan=2>[[Image:veloren_Steel_Shoulders.png|32px]] [[Steel Shoulders]]</td>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <td>3.33%</td>
+            <div style="width=90%;">[[Image:veloren_Steel_Shoulders.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Steel Shoulders]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">3.33%</td>
       </tr>
       <tr>
-        <td colspan=2>[[Image:veloren_Steel_Chausses.png|32px]] [[Steel Chausses]]</td>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <td>3.33%</td>
+            <div style="width=90%;">[[Image:veloren_Steel_Chausses.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Steel Chausses]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">3.33%</td>
       </tr>
     </table>
@@ Line 79: / Line 104: @@
   <tr>
     <td colspan=3>
-      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:center;" cellpadding="0" cellspacing="0" width=100%>
+      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
       <tr>
+        <td witdth=55%>
-        <td width=50% style="text-align:center;"><b>[[File:Veloren Silken Armor Set.png|32px|link=]] [[Silken Armor]]</b></th>
-        <td width=25% style="text-align:center;"><b>1</b></th>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <td width=25% style="text-align:center;"><b>20%</b></th>
+            <div style="width=90%;">[[File:Veloren Silken Armor Set.png|32px|link=]]</div>
+            <div style="width=10%; padding-left:0.5em;"><b>[[Silken Armor]]</b></div>
+          </div>
+        </td>
+        <td width=21% style="padding-left:1em;"><b>1</b></td>
+        <td width=24% style="padding-left:1em;"><b>20%</b></td>
       </tr>
       <tr>
-        <td colspan=2>[[Image:veloren_Silken_Robe.png|32px]] [[Silken Robe]]</td>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <td>6.67%</td>
+            <div style="width=90%;">[[Image:veloren_Silken_Robe.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Silken Robe]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">6.67%</td>
       </tr>
       <tr>
-        <td colspan=2>[[Image:veloren_Silken_Shoulders.png|32px]] [[Silken Shoulders]]</td>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <td>6.67%</td>
+            <div style="width=90%;">[[Image:veloren_Silken_Shoulders.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Silken Shoulders]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">6.67%</td>
       </tr>
       <tr>
-        <td colspan=2>[[Image:veloren_Silken_Skirt.png|32px]] [[Silken Skirt]]</td>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <td>6.67%</td>
+            <div style="width=90%;">[[Image:veloren_Silken_Skirt.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Silken Skirt]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">6.67%</td>
       </tr>
     </table>
@@ Line 102: / Line 147: @@
   <tr>
+    <td>
-    <td>[[Image:veloren_Coconut.png|32px]] [[Coconut]]</td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-    <td>2</td>
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Coconut.png|32px]]</div>
-    <td>10%</td>
+        <div style="width=10%; padding-left:0.5em;">[[Coconut]]</div>
+      </div>
+    </td>
+    <td>2-4</td>
+    <td style="padding-left:0.8em;">10%</td>
   </tr>