table { width: 100%; } %table-actions { width: 60px !important; } th.actions input { display: none; } th.actions { text-align: right; } table tr { display: flex; } table td { display: inline-flex; align-items: center; height: 50px; } table td a { display: block; } table caption { text-align: left; margin-bottom: 0.8em; } table th { padding-bottom: 0.6em; } table th:not(.actions), table td:not(.actions), table td a { padding-right: 0.9em; } th, td:not(.actions), td:not(.actions) a { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* hide actions on narrow screens, you can always click in do everything from there */ @media #{$--lt-wide-table} { tr > .actions { display: none; } }