Composite table idea

HTML

<!DOCTYPE html>
<html>
<head>
<style>
  /* 1. Make the table scrollable horizontally on mobile */
  .table-wrapper {
    overflow-x: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    min-width: 600px; /* Forces scroll on small screens */
  }

  th, td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
    background: #fff;
  }

  th {
    background-color: #f8f9fa;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
  }

  /* 2. Sticky First Column Strategy */
  th:first-child, td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff; /* Key to hide scroll content behind it */
    border-right: 2px solid #f0f0f0;
    width: 150px;
  }
  th:first-child { background-color: #f8f9fa; }

  /* 3. Composite Cell Styling */
  .cell-group { display: flex; flex-direction: column; gap: 4px; }
  
  .spec-row { 
    display: flex; 
    justify-content: space-between; 
    font-size: 12px; 
  }
  
  .label { color: #888; margin-right: 8px; }
  .value { color: #222; font-weight: 500; }
  
  .primary-stat {
    font-size: 15px;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 4px;
  }
</style>
</head>
<body>

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Vehicle Model</th>
        <th>Performance Specs</th>
        <th>Dimensions & Capacity</th>
        <th>Market Data</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="primary-stat">Model X Gen 2</div>
          <span class="label">Sedan Class</span>
        </td>
        <td>
          <div class="cell-group">
            <div...