Experimental changes to make table fit+scroll

- limit individual cells to 15em, and show ellipses when truncated
- limit total table width to body width, so that inner table is shown
with scrollbar
- use class rather than id - ids are bad practice in Svelte components,
as more than one may be displayed on a single page
This commit is contained in:
Damien Elmes 2022-06-06 14:42:58 +10:00
parent 74af380d32
commit 053ce82588

View file

@ -10,7 +10,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let preview: Generic.StringList[]; export let preview: Generic.StringList[];
</script> </script>
<table id="preview"> <div class="outer">
<table class="preview">
{#each columnOptions.slice(1) as { label }} {#each columnOptions.slice(1) as { label }}
<th> <th>
{label} {label}
@ -24,17 +25,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</tr> </tr>
{/each} {/each}
</table> </table>
</div>
<style lang="scss"> <style lang="scss">
#preview { .outer {
// approximate size based on body max width + margins
width: min(90vw, 65em);
overflow: auto;
}
.preview {
border-collapse: collapse; border-collapse: collapse;
width: 100%;
white-space: nowrap; white-space: nowrap;
th, th,
td { td {
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid var(--faint-border); border: 1px solid var(--faint-border);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
max-width: 15em;
} }
th { th {