Test page: Difference between revisions
Line 103: | Line 103: | ||
|} | |} | ||
== flex table using wikitable (per bingbot) == | == flex table using wikitable class (per bingbot) == | ||
to center table add <nowiki>style="margin:auto;</nowiki> | to center table add <nowiki>style="margin:auto;</nowiki> | ||
Line 136: | Line 136: | ||
| style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 2 | | style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 2 | ||
|} | |} | ||
</pre> | |||
=== responsive table w/ collapsing columns into 1 on mobile === | |||
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc; width: 100%;" | |||
|+ My Responsive Flexbox Table with Bold Header Row | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 1 | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 2 | |||
|} | |||
<pre> | |||
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc; width: 100%;" | |||
|+ My Responsive Flexbox Table with Bold Header Row | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 1 | |||
! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 2 | |||
|- | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 1 | |||
| style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 2 | |||
|} | |||
</pre> | </pre> | ||
Revision as of 17:31, 30 May 2024
Table w/ background color
asdfd | asdfadsf | adfd | adfd |
---|---|---|---|
asdf | asdf | asdfd | |
asdf | |||
asdfasdf |
use page for testing articles, formats, templates, etc.
Table with single divided cell
subtable | or split the cells? | |
Responsive table
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.
- At elementum eu facilisis sed odio morbi. Quisque id diam vel quam elementum pulvinar etiam. Risus at ultrices mi tempus. Proin nibh nisl condimentum id venenatis.
- Rhoncus urna neque viverra justo nec ultrices. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Erat imperdiet sed euismod nisi porta lorem.
- Blue item
- Green item
- Red item
this one works
Lorem ipsum dolor sit amet
At elementum eu facilisis sed odio
<div style="display: flex; flex-wrap: wrap;"> <div style="flex: 1; max-width: 15%; padding: 1em;"> * Lorem ipsum dolor sit amet </div> <div style="flex: 1; min-width: 20em; max-width: 15%;padding: 1em;"> * At elementum eu facilisis sed odio </div> <!-- Add more columns as needed -->
uses template "Div col" =
- bloody mess bc needs a css file
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.
- At elementum eu facilisis sed odio morbi. Quisque id diam vel quam elementum pulvinar etiam. Risus at ultrices mi tempus. Proin nibh nisl condimentum id venenatis.
- Rhoncus urna neque viverra justo nec ultrices. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Erat imperdiet sed euismod nisi porta lorem.
table with different widths
- seems that wrapping just happens according to the width of the column
Example | Example | Example | Example | Example | Very long text in Col 6 |
flex table using wikitable class (per bingbot)
to center table add style="margin:auto;
Header 1 | Header 2 |
---|---|
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
Row 3, Column 1 | Row 3, Column 2 |
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc;" |+ My Flexbox Table with Bold Header Row ! style="border: 1px solid #ccc; padding: 10px; font-weight: bold;" | Header 1 ! style="border: 1px solid #ccc; padding: 10px; font-weight: bold;" | Header 2 |- | style="border: 1px solid #ccc; padding: 10px;" | Row 1, Column 1 | style="border: 1px solid #ccc; padding: 10px;" | Row 1, Column 2 |- | style="border: 1px solid #ccc; padding: 10px;" | Row 2, Column 1 | style="border: 1px solid #ccc; padding: 10px;" | Row 2, Column 2 |- | style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 1 | style="border: 1px solid #ccc; padding: 10px;" | Row 3, Column 2 |}
responsive table w/ collapsing columns into 1 on mobile
Header 1 | Header 2 |
---|---|
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
Row 3, Column 1 | Row 3, Column 2 |
{| class="wikitable" style="border-collapse: collapse; border: 1px solid #ccc; width: 100%;" |+ My Responsive Flexbox Table with Bold Header Row ! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 1 ! style="border: 1px solid #ccc; padding: 10px; font-weight: bold; width: 50%;" | Header 2 |- | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 1 | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 1, Column 2 |- | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 1 | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 2, Column 2 |- | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 1 | style="border: 1px solid #ccc; padding: 10px; width: 50%;" | Row 3, Column 2 |}