Tabla 3 (responsive)

#	TCODE	Description	Functional Area
1	Item 1	Lorem Ipsum 1	Notes 1
2	Item 2	Lorem Ipsum 2	Notes 2
3	Item 3	Lorem Ipsum 3	Notes 3

_______________________________________

<STYLE> table{border-collapse:collapse}th{text-align:inherit} .table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,5%)}@media(max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}.shadow--sm{-webkit-box-shadow:5px 5px 15px 0 rgba(73,73,73,.16);-moz-box-shadow:5px 5px 15px 0 rgba(73,73,73,.16);box-shadow:5px 5px 15px rgba(73,73,73,.16)} .border-radius{-webkit-border-radius:1.3rem!important;-moz-border-radius:1.3rem!important;border-radius:1.3rem!important} .border-top-radius{-webkit-border-top-left-radius:1.3rem!important;-moz-border-top-left-radius:1.3rem!important;border-top-left-radius:1.3rem!important;-webkit-border-top-right-radius:1.3rem!important;-moz-border-top-right-radius:1.3rem!important;border-top-right-radius:1.3rem!important} .border-top-left-radius{-webkit-border-top-left-radius:1.3rem!important;-moz-border-top-left-radius:1.3rem!important;border-top-left-radius:1.3rem!important} .border-top-right-radius{-webkit-border-top-right-radius:1.3rem!important;-moz-border-top-right-radius:1.3rem!important;border-top-right-radius:1.3rem!important} .border-bottom-radius{-webkit-border-bottom-left-radius:1.3rem!important;-moz-border-bottom-left-radius:1.3rem!important;border-bottom-left-radius:1.3rem!important;-webkit-border-bottom-right-radius:1.3rem!important;-moz-border-bottom-right-radius:1.3rem!important;border-bottom-right-radius:1.3rem!important}table.table{-webkit-border-radius:1.3rem!important;-moz-border-radius:1.3rem!important;border-radius:1.3rem!important}.break-words{word-break:break-all} table.table{-webkit-border-radius:1.3rem!important;-moz-border-radius:1.3rem!important;border-radius:1.3rem!important} .list-group__header,table thead tr{background-color:#2c3d5f;color:#fff;padding:2rem 3rem}.list-group--columns{-moz-column-count:4;-moz-column-gap:0;-webkit-column-count:4;-webkit-column-gap:0;column-count:4;column-gap:0;padding-inline-start:0;overflow:hidden}.list-group--columns-1{column-count:1}.list-group-item,.table th,.table td{border:0;padding:1.5rem 3rem;color:#2c3d5f}.list-group-item{white-space:nowrap;overflow:scroll}.table th{color:#fff}.list-group-item:nth-child(even){background-color:#f5f7f9}.table-striped>tbody>tr:nth-child(2n+1)>td{background-color:#f9f9f9}thead{overflow:hidden}tr.row:hover { background:red; } </STYLE> <div class="table-responsive-sm"> <table class="table table-striped border-radius shadow--sm"> <thead class=" border-top-radius"> <tr> <th scope="col" class="border-top-left-radius break-words">#</th> <th scope="col">TCODE</th> <th scope="col">Description</th> <th scope="col" class="border-top-right-radius">Functional Area</th> </tr> </thead> <tbody> <tr class="row"> <td>1</td> <td scope="row" class="break-words"><strong>Item 1</strong></td> <td scope="row" class="break-words">Lorem Ipsum 1</td> <td scope="row" class="break-words">Notes 1</td> </tr> <tr class="row"> <td>2</td> <td scope="row" class="break-words"><strong>Item 2</strong></td> <td scope="row" class="break-words">Lorem Ipsum 2</td> <td scope="row" class="break-words">Notes 2</td> </tr> <tr class="row"> <td>3</td> <td scope="row" class="break-words"><strong>Item 3</strong></td> <td scope="row" class="break-words">Lorem Ipsum 3</td> <td scope="row" class="break-words">Notes 3</td> </tr> </tbody> </table> </div>