User:Jerodast/Table Experiment

This is to try different style options for tables with a "caption"/header and a card.

Unfortunately when table borders are involved it seems like you have to override each cell's style, you can't do a whole row at once?

I also wanted to try to get the side borders to match the header border style on some rows, but couldn't figure out what CSS to use.

One issue here is that the card template seems to insert some extra space at the top, probably in part due to the "minion portrait hump".

Divs
Todo: Make a template for all this formatting.

Reminder: A lot of the padding fiddling is to try to match the unavoidable space at the top of each card (although could it be set up so that the transparent part of the card is pushed up into the border of the div? Don't know...

 Level 11/13
 * Text on top, padding all around

 Level 15/17

 Level 19/21

 Level 23/25

 Level 27/29

 Level 31/33

 Level 11/13
 * Text on top; relative positioning to push it into image; no padding

 Level 15/17

 Level 19/21

 Level 23/25

 Level 27/29

 Level 31/33

 Level 11/13
 * No shading; text on top; relative positioning to push it into image

 Level 15/17

 Level 19/21

 Level 23/25

<div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top;"> Level 27/29

<div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top;"> Level 31/33

<div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding:0px 5px 5px 5px; background-color:rgba(0,0,0,0.05); border-radius:15px"> Level 11/13 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding:0px 5px 5px 5px; background-color:rgba(0,0,0,0.05); border-radius:15px"> Level 15/17 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding:0px 5px 5px 5px; background-color:rgba(0,0,0,0.05); border-radius:15px"> Level 19/21 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding:0px 5px 5px 5px; background-color:rgba(0,0,0,0.05); border-radius:15px"> Level 23/25 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding:0px 5px 5px 5px; background-color:rgba(0,0,0,0.05); border-radius:15px"> Level 27/29 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding:0px 5px 5px 5px; background-color:rgba(0,0,0,0.05); border-radius:15px"> Level 31/33
 * Text on bottom; padding 3 sides

<div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding-bottom:5px; background-color:rgba(0,0,0,0.1); border-radius:15px"> Level 35/37 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding-bottom:5px; background-color:rgba(0,0,0,0.1); border-radius:15px"> Level 39/41 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding-bottom:5px; background-color:rgba(0,0,0,0.1); border-radius:15px"> Level 43/45 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding-bottom:5px; background-color:rgba(0,0,0,0.1); border-radius:15px"> Level 47/49 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding-bottom:5px; background-color:rgba(0,0,0,0.1); border-radius:15px"> Level 47/49 <div style="text-align:center; font-weight:bold; display: inline-block; max-width: 200px; word-wrap: break-word; vertical-align: top; margin-right: 10px; margin-bottom: 10px; padding-bottom:5px; background-color:rgba(0,0,0,0.1); border-radius:15px"> Level 47/49
 * Text on bottom; padding bottom only