.data-table { width: 100%; text-align: left; border-collapse: collapse; th, td { padding: 8px; } th { border-bottom: 1px solid #39434a; white-space: nowrap; } tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.03); } tr:hover { background-color: rgba(255, 255, 255, 0.09); } thead tr:hover { background-color: transparent; } tbody td.actions { display: flex; flex-direction: row; button { padding: 8px; .icon { margin: 0 !important; } .tip { display: none; } } } thead th.col-grow { width: 100%; } tbody td.col-grow-cell { > * { display: flex; flex-direction: row; > * { width: 0; flex-grow: 1; white-space: nowrap; text-overflow: ellipsis; } * { overflow: hidden; text-overflow: ellipsis; } } } } .data-table-container { overflow-x: auto; max-width: 100%; }