diff --git a/src/styles/table.css b/src/styles/table.css index 40f3916..fbcaf3b 100644 --- a/src/styles/table.css +++ b/src/styles/table.css @@ -41,7 +41,7 @@ table { width: 100%; border-collapse: separate; border-spacing: 0; - table-layout: auto; + table-layout: fixed; /* Force fixed layout to prevent horizontal scroll */ } th, td { @@ -49,6 +49,8 @@ th, td { border-bottom: 1px solid var(--hairline); text-align: left; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; /* Show ... for long text */ } thead { @@ -86,11 +88,9 @@ tbody tr:hover { /* 메모 컬럼 전용 */ .col-memo { - width: 25%; - min-width: 300px; - white-space: normal !important; - word-break: break-all; - line-height: 1.5; + white-space: nowrap !important; /* Keep as one line */ + overflow: hidden; + text-overflow: ellipsis; } /* --- Table Sorting --- */ diff --git a/src/views/List/ListFactory.ts b/src/views/List/ListFactory.ts index c711373..71c1aff 100644 --- a/src/views/List/ListFactory.ts +++ b/src/views/List/ListFactory.ts @@ -749,7 +749,9 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { tbody.innerHTML = filtered.length === 0 ? `${UI_TEXT.MESSAGES.NO_DATA}` : filtered.map(asset => `${config.columns.map(col => { const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월'); - return `${col.render(asset)}`; + const alignmentClass = col.align ? `text-${col.align}` : (isDateCol ? 'text-center' : ''); + const customClass = col.className || ''; + return `${col.render(asset)}`; }).join('')}`).join(''); tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); });