Updated table styling to ideally by more predictable
Set styles to be fixed and not cut text.
Showing
4 changed files
with
25 additions
and
23 deletions
| ... | @@ -50,7 +50,7 @@ function editorPaste(e, editor) { | ... | @@ -50,7 +50,7 @@ function editorPaste(e, editor) { |
| 50 | function registerEditorShortcuts(editor) { | 50 | function registerEditorShortcuts(editor) { |
| 51 | // Headers | 51 | // Headers |
| 52 | for (let i = 1; i < 5; i++) { | 52 | for (let i = 1; i < 5; i++) { |
| 53 | - editor.addShortcut('ctrl+' + i, '', ['FormatBlock', false, 'h' + i]); | 53 | + editor.addShortcut('meta+' + i, '', ['FormatBlock', false, 'h' + i]); |
| 54 | } | 54 | } |
| 55 | 55 | ||
| 56 | // Other block shortcuts | 56 | // Other block shortcuts | ... | ... |
| 1 | * { | 1 | * { |
| 2 | box-sizing: border-box; | 2 | box-sizing: border-box; |
| 3 | } | 3 | } |
| 4 | + | ||
| 4 | html { | 5 | html { |
| 5 | background-color: #FFFFFF; | 6 | background-color: #FFFFFF; |
| 6 | height: 100%; | 7 | height: 100%; |
| ... | @@ -9,6 +10,7 @@ html { | ... | @@ -9,6 +10,7 @@ html { |
| 9 | overflow-y: hidden; | 10 | overflow-y: hidden; |
| 10 | } | 11 | } |
| 11 | } | 12 | } |
| 13 | + | ||
| 12 | body { | 14 | body { |
| 13 | font-family: $text; | 15 | font-family: $text; |
| 14 | font-size: $fs-m; | 16 | font-size: $fs-m; |
| ... | @@ -19,16 +21,4 @@ body { | ... | @@ -19,16 +21,4 @@ body { |
| 19 | 21 | ||
| 20 | button { | 22 | button { |
| 21 | font-size: 100%; | 23 | font-size: 100%; |
| 22 | -} | ||
| 23 | - | ||
| 24 | -table { | ||
| 25 | - min-width: 100px; | ||
| 26 | - td, th { | ||
| 27 | - min-width: 10px; | ||
| 28 | - padding: 4px 6px; | ||
| 29 | - border: 1px solid #DDD; | ||
| 30 | - } | ||
| 31 | - td p, th p { | ||
| 32 | - margin: 0; | ||
| 33 | - } | ||
| 34 | } | 24 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -66,9 +66,10 @@ | ... | @@ -66,9 +66,10 @@ |
| 66 | margin: $-m 0; | 66 | margin: $-m 0; |
| 67 | } | 67 | } |
| 68 | table { | 68 | table { |
| 69 | - word-break: break-all; | ||
| 70 | - word-break: break-word; | ||
| 71 | hyphens: auto; | 69 | hyphens: auto; |
| 70 | + table-layout: fixed; | ||
| 71 | + max-width: 100%; | ||
| 72 | + height: auto !important; | ||
| 72 | } | 73 | } |
| 73 | } | 74 | } |
| 74 | 75 | ... | ... |
| 1 | +table { | ||
| 2 | + min-width: 100px; | ||
| 3 | + max-width: 100%; | ||
| 4 | + thead { | ||
| 5 | + background-color: #F8F8F8; | ||
| 6 | + font-weight: 500; | ||
| 7 | + } | ||
| 8 | + td, th { | ||
| 9 | + min-width: 10px; | ||
| 10 | + padding: 6px 8px; | ||
| 11 | + border: 1px solid #DDD; | ||
| 12 | + overflow: auto; | ||
| 13 | + line-height: 1.2; | ||
| 14 | + } | ||
| 15 | + td p, th p { | ||
| 16 | + margin: 0; | ||
| 17 | + } | ||
| 18 | +} | ||
| 1 | 19 | ||
| 2 | table.table { | 20 | table.table { |
| 3 | width: 100%; | 21 | width: 100%; |
| ... | @@ -9,6 +27,7 @@ table.table { | ... | @@ -9,6 +27,7 @@ table.table { |
| 9 | border: none; | 27 | border: none; |
| 10 | padding: $-xs $-xs; | 28 | padding: $-xs $-xs; |
| 11 | vertical-align: middle; | 29 | vertical-align: middle; |
| 30 | + margin: 0; | ||
| 12 | } | 31 | } |
| 13 | th { | 32 | th { |
| 14 | font-weight: bold; | 33 | font-weight: bold; |
| ... | @@ -18,14 +37,6 @@ table.table { | ... | @@ -18,14 +37,6 @@ table.table { |
| 18 | } | 37 | } |
| 19 | } | 38 | } |
| 20 | 39 | ||
| 21 | -table { | ||
| 22 | - max-width: 100%; | ||
| 23 | - thead { | ||
| 24 | - background-color: #F8F8F8; | ||
| 25 | - font-weight: 500; | ||
| 26 | - } | ||
| 27 | -} | ||
| 28 | - | ||
| 29 | table.no-style { | 40 | table.no-style { |
| 30 | td { | 41 | td { |
| 31 | border: 0; | 42 | border: 0; | ... | ... |
-
Please register or sign in to post a comment