All Questions

.form-control{
    border-radius: 100vw;
    margin-bottom: .75rem;
    text-decoration: none;
    appearance: none;
    padding: 0.375rem 1.5rem !important;
    position: relative;
}
.form-control:required::after{
    content: '*';
    font-size: 1.5rem;
    color: #417A5F;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="modalForm">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                 <h5>Form</h5>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control form-input" id="fname" placeholder="First Name" required>
                    <input type="text" class="form-control form-input" id="lname" placeholder="Last Name" required>
                    <select name="gender" class="form-control" id="gender" required>
                        <option value="Null" selected hidden>Gender</option>
                        <option value="M">Male</option>
                        <option value="F">Female</option>
                    </select>
                    <input type="date" name="dob" id="dob" class="form-control" placeholder="Date of Birth" required>
                    <input type="tel" name="phone" id="phone" class="form-control" placeholder="Phone Number" required>
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email" required>
                    <input type="tel" name="zipcode" id="zipcode" class="form-control" placeholder="Zip Code">
                    <input type="text" name="street" id="street" class="form-control" placeholder="Address" required>
                    <input type="text" name="city" id="city" class="form-control" placeholder="City" required>
                    <select name="state" class="form-control" id="state" required>
                        <option value="Null" selected hidden>State</option>
                    </select>
                    
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>
    </div>

let tabla: any = document.getElementById('tabla')

 let row = tabla.rows;       
for (let j = 0; j < row.length; j++) {
        row[j].deleteCell(2);                      
 }

document.querySelector('#tabla .eliminar').remove();

<table class="border border-cyan-800" id='tabla>
    <thead>

        <tr>
            <th rowspan="2">Nombre </th>
            <th rowspan="2"> Apellido </th>
            <th colspan="3"> Valores iniciales </th>
            <th rowspan="2" class="eliminar"> Promedio inicial </th>
            <th rowspan="2"> Media inicial </th>
            <th colspan="3"> Valores finales </th>
            <th rowspan="2" class="eliminar"> Promedio final </th>
            <th rowspan="2"> Media final </th>
        </tr>
        <tr>
            <th> Enero </th>
            <th> Febrero </th>
            <th> Marzo </th>
            <th> Abril </th>
            <th> Mayo </th>
            <th> Junio </th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td> juan </td>
            <td> perez </td>
            <td> 10 </td>
            <td> 20 </td>
            <td> 30 </td>
            <td class="eliminar"> 30 </td>
            <td> 18 </td>
            <td> 5 </td>
            <td> 8 </td>
            <td> 50 </td>
            <td class="eliminar"> 50 </td>
            <td> 50 </td>
        </tr>
    </tbody>
</table>