m (More clear) |
No edit summary |
||
| Line 6: | Line 6: | ||
I have a series of inline-tables, like these: |
I have a series of inline-tables, like these: |
||
| − | <table class="TableClass" style="display:inline-block; text-align:center; border:1px solid; width:80px; vertical-align:top;"> |
+ | <table class="TableClass" style="display:inline-block; text-align:center; border:1px solid; width:80px; vertical-align:top;"><tr><td style="border:1px solid; width:80px;">IMAGE</td></tr><tr><th style="border:1px double; width:80px;">Caption</th></tr></table> |
| + | |||
| − | <tr> |
||
| − | <td style="border:1px solid; width:80px;">IMAGE</td> |
+ | <table class="TableClass" style="display:inline-block; text-align:center; border:1px solid; width:80px; vertical-align:top;"><tr><td style="border:1px solid; width:80px;">IMAGE</td></tr><tr><th style="border:1px double; width:80px;">Caption too long</th></tr></table> |
| + | |||
| − | </tr> |
||
| ⚫ | |||
| − | <tr> |
||
| − | <th style="border:1px double; width:80px;">Caption</th> |
||
| − | </tr> |
||
| − | </table> |
||
| ⚫ | |||
| − | <tr> |
||
| − | <td style="border:1px solid; width:80px;">IMAGE</td> |
||
| − | </tr> |
||
| − | <tr> |
||
| − | <th style="border:1px double; width:80px;">Caption too long</th> |
||
| − | </tr> |
||
| − | </table> |
||
| ⚫ | |||
| − | <tr> |
||
| − | <td style="border:1px solid; width:80px;">IMAGE</td> |
||
| − | </tr> |
||
| − | <tr> |
||
| − | <th style="border:1px double; width:80px;">Caption</th> |
||
| − | </tr> |
||
| − | </table> |
||
The header cell's height can be various, so I want to make all the table (basically the captions) the same, equals to the maximum height of the series. I cannot wrap them under a container, or rather the tables are on more then one line, like this: |
The header cell's height can be various, so I want to make all the table (basically the captions) the same, equals to the maximum height of the series. I cannot wrap them under a container, or rather the tables are on more then one line, like this: |
||
<div style="width:165px;"> |
<div style="width:165px;"> |
||
| − | <table class="TableClass" style="display:inline-block; text-align:center; border:1px solid; width:80px; vertical-align:top;"> |
+ | <table class="TableClass" style="display:inline-block; text-align:center; border:1px solid; width:80px; vertical-align:top;"><tr><td style="border:1px solid; width:80px;">IMAGE</td></tr><tr><th style="border:1px double; width:80px;">Caption</th></tr></table> |
| ⚫ | |||
| − | <tr> |
||
| − | <td style="border:1px solid; width:80px;">IMAGE</td> |
+ | <table class="TableClass" style="display:inline-block; text-align:center; border:1px solid; width:80px; vertical-align:top;"><tr><td style="border:1px solid; width:80px;">IMAGE</td></tr><tr><th style="border:1px double; width:80px;">Caption</th></tr></table> |
| − | </tr> |
||
| − | <tr> |
||
| − | <th style="border:1px double; width:80px;">Caption</th> |
||
| − | </tr> |
||
| − | </table> |
||
| − | <table class="TableClass" style="display:inline-block; text-align:center; border:1px solid; width:80px; vertical-align:top;"> |
||
| − | <tr> |
||
| − | <td style="border:1px solid; width:80px;">IMAGE</td> |
||
| − | </tr> |
||
| − | <tr> |
||
| − | <th style="border:1px double; width:80px;">Caption too long</th> |
||
| − | </tr> |
||
| − | </table> |
||
| − | <table class="TableClass" style="display:inline-block; text-align:center; border:1px solid; width:80px; vertical-align:top;"> |
||
| − | <tr> |
||
| − | <td style="border:1px solid; width:80px;">IMAGE</td> |
||
| − | </tr> |
||
| − | <tr> |
||
| − | <th style="border:1px double; width:80px;">Caption</th> |
||
| − | </tr> |
||
| − | </table> |
||
</div> |
</div> |
||
So I cannot find a solution with CSS only, how can I do it with JS? {{User:Leviathan_89/sig2|23:08|1|May|2012}} |
So I cannot find a solution with CSS only, how can I do it with JS? {{User:Leviathan_89/sig2|23:08|1|May|2012}} |
||
| + | |||
| + | : This is about creating a template isn't it? If so, there's an extension named [[mediawikiwiki:Extension:ImageSizeInfoFunctions|ImageSizeInfoFunctions]] which is apparently enabled on [[w:c:fallout:Fallout_Wiki:Extensions|some]] Wikia wikis. If you can convince Staff to enable that extension for your wiki as well, you can solve this without JavaScript. |
||
| + | |||
| + | :For a JavaScript solution you should use jQuery's [http://api.jquery.com/height/ height()] and [http://api.jquery.com/css/#css2 css()] methods. -- {{User:Pecoes/sig|00:51, May 02, 2012 (UTC)}} -- {{User:Pecoes/sig|00:51, May 02, 2012 (UTC)}} |
||
Revision as of 00:51, 2 May 2012
Forums: Admin Central Index → Technical Help → Resize to maximum element
Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 4370 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.
I have a series of inline-tables, like these:
| IMAGE |
| Caption |
|---|
| IMAGE |
| Caption too long |
|---|
| IMAGE |
| Caption |
|---|
The header cell's height can be various, so I want to make all the table (basically the captions) the same, equals to the maximum height of the series. I cannot wrap them under a container, or rather the tables are on more then one line, like this:
| IMAGE |
| Caption |
|---|
| IMAGE |
| Caption too long |
|---|
| IMAGE |
| Caption |
|---|
So I cannot find a solution with CSS only, how can I do it with JS? leviathan_89 23:08, 1 May, 2012 (UTC)
- This is about creating a template isn't it? If so, there's an extension named ImageSizeInfoFunctions which is apparently enabled on some Wikia wikis. If you can convince Staff to enable that extension for your wiki as well, you can solve this without JavaScript.