body { font-size: calc(10px + .5vw); padding: 0 0 30px; font-family: 'Play', sans-serif; } .container-fluid { max-width: 1440px; overflow: auto; } h2 { font-size: 20px; } th { position: relative; text-transform: capitalize; background: #eef7fd; } .react-bs-table { border: 1px solid #ddd; border-radius: 2px; margin: 0; &, & table { // We can't do this because, unbelievably, the elements are in a separate table :( //table-layout: auto; } table { td, th { // Override some bananas styles // Why did they think nowrap was a smart idea? Fuck mobiles, right? white-space: normal; word-break: break-word; } } } // Realistically, this would bring in bootstrap as a package and use it properly .table { // Cells > thead, > tbody, > tfoot { > tr { > th, > td { padding: 1px calc(0px + 1vw); } > th { padding-right: 20px; } } } } // Quick solution to the forced table-layout: fixed th, td { &:nth-child(1) { width: 50%; } &:nth-child(2) { width: 22%; } &:nth-child(3) { width: 14%; } &:nth-child(4) { width: 14%; } } .order { position: absolute; top: 1px; right: 3px; }