Test page: Difference between revisions
No edit summary |
|||
| Line 42: | Line 42: | ||
== Responsive table == | == Responsive table == | ||
{{Div col|colwidth= | {{Div col|colwidth=30em}} | ||
* 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. | * 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. | * 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. | * Rhoncus urna neque viverra justo nec ultrices. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Erat imperdiet sed euismod nisi porta lorem. | ||
{{Div col end}} | {{Div col end}} | ||
{{Div col|colwidth=20em}} | |||
* <span style="color: blue;">Blue item</span> | |||
* <span style="color: green;">Green item</span> | |||
* <span style="color: red;">Red item</span> | |||
{{Div col end}} | |||
=== this one works === | |||
<div style="display: flex; flex-wrap: wrap;"> | |||
<div style="flex: 1; min-width: 20em; padding: 1em;"> | |||
* 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. | |||
</div> | |||
<div style="flex: 1; min-width: 20em; padding: 1em;"> | |||
* 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. | |||
</div> | |||
<!-- Add more columns as needed --> | |||
</div> | |||
=== uses template "Div col" ==== | === uses template "Div col" ==== | ||
* bloody mess bc needs a css file | * bloody mess bc needs a css file | ||
{{Div col | {{Div col}} | ||
* 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. | * 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. | * 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. | * Rhoncus urna neque viverra justo nec ultrices. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Erat imperdiet sed euismod nisi porta lorem. | ||
{{Div col end}} | {{Div col end}} | ||
== table with different widths == | == table with different widths == | ||
Revision as of 12:38, 10 April 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, 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.
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 |