Editor: Editor moved page Table Experiments to Template:Table Experiments

2018-06-28T23:47:28Z

Editor moved page Table Experiments to Template:Table Experiments

Editors: /* Convert Table into List */

2017-10-31T15:43:09Z

‎Convert Table into List

New page

==Convert List into Table==

<div class="labellist table">

<div class="lrow">

<div class = "firstcol">

Sapphire Reserve

</div>

<div class = "lcontent">

This is the first paragraph of the comments.

This is the second paragraph of the comments.

</div>
</div>

<div class = "lrow">

<div class="firstcol">

Citi Prestige

</div>

<div class="lcontent">

This is the first paragraph of the comments.

This is the second paragraph of the comments

</div>
</div>
</div>

==Convert Table into List==

{| class = "table labels"
|Sapphire Reserve
|This is the first paragraph of the comments.

This is the second paragraph of the comments.
|-
|Citi Prestige
|This is the first paragraph of the comments.

This is the second paragraph of the comments
|}

==Construct with Bootstrap Grid==
<div class = "row>
<div class = "col-md-8 col-xs-12 col-md-offset-2">

<div class = "row">
<div class = "col-md-2 col-xs-6">Sapphire Reserve</div>
<div class = "col-md-2 col-xs-6>$1,250</div>
<div class = "col-md-8 col-xs-12>This is a comment about the Sapphire Reserve card.</div>
</div>
<div class = "row">
<div class = "col-md-2 col-xs-6">Citi Prestige</div>
<div class = "col-md-2 col-xs-6">$1,000</div>
<div class = "col-md-8 col-xs-12">This is a comment about the Citi Prestige.</div>
</div>

</div></div>

==Attempt to wrap just final cell in each row==
<table>
<div class="rowwrap">
<div class = "colwrap">
<td>Citi Prestige</td>
<td>$1,250</td>
</div>
<div class = "comwrap"><td colspan=2>
This is a longer comment that is part of an item. Let's assume a single paragraph for now.
</td></div>
</div>
</div class="rowwrap">
<div class = "colwrap">
<td>Sapphire Reserve</td>
<td>$1,000</td>
</div>
<div class = "comwrap"><td colspan=2>
This is a paragraph about this card.
</td></div>
</div>
</table>

==Basic==

{|
!Card!!Value
|-

|Sapphire Reserve||$1,250

<div = "comment">

This is a comment about the Sapphire Reserve card.

</div>

|-

|Citi Prestige||$1,000

<div = "comment">

This is a comment about the Citi Prestige card.

What happens with a second row in here.

</div>

|-
|Amex Platinum||$900

<div = "comment">

This is a comment about the Amex Platinum card.

</div>

|}

==Striped==

{| class="table table-striped table-condensed table-hover table-bordered"
!Card!!Value
|-
|Sapphire Reserve||$1,250
|This is a comment about the Sapphire Reserve card.
|-
|Citi Prestige||$1,000
|This is a comment about the Citi Prestige card.
And it is a bit longer than the comment above
|-
|Amex Platinum||$900
|This is a comment about the Amex Platinum card.
|}

==Striped Comments Under==

{| class="table commenttable table-condensed table-hover table-bordered"
!Card!!Value
|-
|Sapphire Reserve||$1,250
|-
|This is a comment about the Sapphire Reserve card.
|-
|Citi Prestige||$1,000
|-
| This is a comment about the Citi Prestige card.

And it is a bit longer than the comment above
|-
|Amex Platinum||$900
|-
|This is a comment about the Amex Platinum card.
|}

==Nested Tables==

{| class="table table-striped table-condensed table-hover table-bordered"
|-
|
{|
|Sapphire Reserve
|$1,250
|}
|This is a comment about the Sapphire Reserve card.
|-
|
{|
|Citi Prestige||$1,000
|}
| This is a comment about the Citi Prestige card.
And it is a bit longer than the comment above
|-
|Amex Platinum||$900
|-
|This is a comment about the Amex Platinum card.
|}

← Older revision	Revision as of 23:47, 28 June 2018
(No difference)

Template:Table Experiments - Revision history

Editor: Editor moved page Table Experiments to Template:Table Experiments

Editors: /* Convert Table into List */