WebsiteBaker Support (2.8.x) > Templates, Menus & Design

table width issues (auto vs. 100%) using daflekk Template

<< < (2/2)

jacobi22:
thx for the link!

Page: Power Tools

1. its better to use not width (and height) in <table>, best way is a special css-class like <table class="tableform1"> or inline-styles like <table style="width:100%;">

2. parent element is content, content has a width=100% (from element container) and max-width=980px
 
3. you use align="center" for the tables, this put all your tables in the center of content, also the smaler tables
 
4. in some of your tables you use <table width="100%"..., but in the editor.css you have a definition for table == width:auto
width:auto is the width, what the table content needs, it counts the max-width from the longest text-line, add all margins and paddings, text-indents etc and build a row, the summary of all rows is the width: auto
example: longest text line in table 1 is this: Nailing, Riveting, Stapling applications plus padding-left:0.9em - thats the width from one row * 3 (three rows a 33%) - thats your auto-width for table 1
the different between table 2 and table 3 is the width from the longest text line, thats way you have different auto widths
a simple solution can be a border:0 for the tables or special table styles (with css for every table)

5. you use list's in every table row, but your css-definition for ul in editor.css say: padding-left: 0.9em;
thats your indent for the smaler tables like the tables under Diesel/Petrol-powered Tools
if you use in this smal tables a definition like table align=left or style definitions with margin to bring the table to the left border in combination with table width:auto, you have now Place for more content on the right side of the table, so that the next text line starts there (and not under the table)

@ dbs

--- Quote ---width: 100%!important
--- End quote ---
set all tables to the full content width - thats not the best solution for the smaler tables

i think, its better to use not a standard width in the general table css (editor.css) - it works for all tables
delete this line and use separat css-definition for every table

Navigation

[0] Message Index

[*] Previous page