Un titre long pour transformer vos visiteurs en clients

.bm-table-2__table-container {
  overflow-x: auto;
}

@media (max-width:650px) {
  .bm-table-2 th{
    display:none !important;
  }
  
  .bm-table-2 td{
    display:block !important;
    min-width: 100% !important;
    gap: var(--space-xs) !important;
  }
  
  .bm-table-2 td:first-child {
    padding-block-start: var(--space-l) !important;
  }
  
  .bm-table-2 td:last-child {
    padding-block-end: var(--space-l) !important;
  }
  
  .bm-table-2 td::before {
    content: attr(data-cell) ':';
    font-weight: 700 !important;
    text-transform: capitalize !important;
    flex-shrink: 0 !important;
  }
  
}

@media (max-width:650px) {
  .bm-table-2 th{
    display:none !important;
  }
  
  .bm-table-2 td{
    display:grid !important;
    grid-template-columns: 10ch 1fr !important;
    min-width: 100% !important;
    gap: var(--space-xs) !important;
  }
  
  .bm-table-2 td:first-child {
    padding-block-start: var(--space-l) !important;
  }
  
  .bm-table-2 td:last-child {
    padding-block-end: var(--space-l) !important;
  }
  
  .bm-table-2 td::before {
    content: attr(data-cell) ':';
    font-weight: 700 !important;
    text-transform: capitalize !important;
    flex-shrink: 0 !important;
  }
  
}

function AddTableARIA() {
  try {
    var allTables = document.querySelectorAll('table');
    for (var i = 0; i < allTables.length; i++) {
      allTables[i].setAttribute('role','table');
    }
    var allCaptions = document.querySelectorAll('caption');
    for (var i = 0; i < allCaptions.length; i++) {
      allCaptions[i].setAttribute('role','caption');
    }
    var allRowGroups = document.querySelectorAll('thead, tbody, tfoot');
    for (var i = 0; i < allRowGroups.length; i++) {
      allRowGroups[i].setAttribute('role','rowgroup');
    }
    var allRows = document.querySelectorAll('tr');
    for (var i = 0; i < allRows.length; i++) {
      allRows[i].setAttribute('role','row');
    }
    var allCells = document.querySelectorAll('td');
    for (var i = 0; i < allCells.length; i++) {
      allCells[i].setAttribute('role','cell');
    }
    var allHeaders = document.querySelectorAll('th');
    for (var i = 0; i < allHeaders.length; i++) {
      allHeaders[i].setAttribute('role','columnheader');
    }
    // this accounts for scoped row headers
    var allRowHeaders = document.querySelectorAll('th[scope=row]');
    for (var i = 0; i < allRowHeaders.length; i++) {
      allRowHeaders[i].setAttribute('role','rowheader');
    }
  } catch (e) {
    console.log("AddTableARIA(): " + e);
  }
}

AddTableARIA();