Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Next revisionBoth sides next revision
72:editor_tables [2019/02/18 17:57] – [Use CSS Styles for Tables] ext-bkkr72:editor_tables [2020/09/11 15:42] aakr
Line 14: Line 14:
   - Select new formating options for your table.   - Select new formating options for your table.
       - //Notice: The **Rows**  and **Columns**  can be changed with the table context menu.//       - //Notice: The **Rows**  and **Columns**  can be changed with the table context menu.//
 +==== Adding a Table to Process Description ====
 +
 +TBD:
 +
 +Tables with images: Images are only scaled down if a table width is specified
 +
 +If a table contains images and the table does not fit into the browser window, it is shown in the mobile view:
 +
 +TBD Mobile Table View
 +
 +If you want the images to be scaled down in this case, specify a specific table width, e.g. 100%. To specify the table width… TBD
 +
 ==== Delete a Table ==== ==== Delete a Table ====
  
Line 34: Line 46:
 .stages_description .minimal_table_style tr h3, .stages_description .minimal_table_style tr h3,
 .stages_description .minimal_table_style tr img {} .stages_description .minimal_table_style tr img {}
 +
 </code> </code>
  
Line 39: Line 52:
  
 //Note: You can also enter an ID if you have a css definition with ID's//. //Note: You can also enter an ID if you have a css definition with ID's//.
 +
 +In this example, the style class is named <font inherit/Courier New,Courier,monospace;;inherit;;inherit>minimal_table_style</font>.
 +
 +<code>
 +.stages_description .minimal_table_style table {
 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 + font-size: 12px;
 + background: #fff;
 + width: 480px;
 + border-collapse: collapse;
 + text-align: left;
 + margin: 20px;
 +}
 +.stages_description .minimal_table_style tr {
 + vertical-align: top;
 +}
 +.stages_description .minimal_table_style td {
 + border-bottom: 1px solid #ccc;
 + color: #669;
 + padding: 6px 8px;
 +}
 +.stages_description .minimal_table_style th {
 + font-size: 14px;
 + font-weight: normal;
 + color: #039;
 + border-bottom: 2px solid #6678b1;
 + padding: 10px 8px;
 +}
 +.stages_description .minimal_table_style tr p,
 +.stages_description .minimal_table_style tr h1,
 +.stages_description .minimal_table_style tr h2,
 +.stages_description .minimal_table_style tr h3,
 +.stages_description .minimal_table_style tr img {
 + color: #669;
 +}
 +
 +</code>
 +
 +This example uses the CSS id selector <font inherit/Courier New,Courier,monospace;;inherit;;inherit>minimal_table_style</font>in the advanced tab of the table properties.
 +
 +<code>
 +table#minimal_table_style{
 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 + font-size: 12px;
 + background: #fff;
 + width: 480px;
 + border-collapse: collapse;
 + text-align: left;
 + margin: 20px;
 +}
 +#minimal_table_style tr{
 + vertical-align: top;
 +}
 +#minimal_table_style td{
 + border-bottom: 1px solid #ccc;
 + color: #669;
 + padding: 6px 8px;
 +}
 +#minimal_table_style th{
 + font-size: 14px;
 + font-weight: normal;
 + color: #039;
 + border-bottom: 2px solid #6678b1;
 + padding: 10px 8px;
 +}
 +#minimal_table_style tr p,
 +#minimal_table_style tr h1,
 +#minimal_table_style tr h2,
 +#minimal_table_style tr h3,
 +#minimal_table_style tr img {
 + color: #669;
 +}
 +
 +</code>