Tengo una mesa plegable, que se abre y se cierra al hacer clic en Contabilidad. Requiere un diseño único. He agregado una casilla de verificación a mis filas contraíbles, que debe alinearse con la columna Fecha. He movido todos mis títulos con un margen negativo, para agruparlos con la casilla de verificación. Ahora, necesito extender los bordes, para que aparezcan nuevamente debajo de los títulos (vea la imagen a continuación). He creado un codesandbox para su revisión. ¿Alguien puede aconsejarme sobre el mejor método para extender los bordes, de modo que se alineen con los títulos? Tenga en cuenta: mi columna de fecha usa filas, por lo que no creo que agregar relleno a la izquierda resuelva el problema.

Fragmento de código:

 <tbody> <tr> <td rowSpan="3" id="date"> Date </td> <td colSpan="4"> <label className="accounting-label" htmlFor="accounting"> Accounting </label> <input type="checkbox" name="accounting" id="accounting" data-toggle="toggle" onClick={showNestedData} ></input> </td> </tr> <tr className="accounting-data hide"> <td className="australia-data"> <div className="flex-au-wrapper"> <div className="au-checkbox-wrapper"> <input type="checkbox" id="au-checkbox" name="subscribe" value="newsletter" ></input> </div> <div>Australia</div> </div> </td> <td>$3,544.00</td> <td>$5,834.00</td> <td>$10,583.00</td> </tr> </tbody>