1

I would like to size and align the header elements in a HTML table's thead section with the header elements in a nested table.

The parent table provides the alternating-row coloring, while the nested table allows me to position the fields in multiple rows.

enter image description here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<table class="table table-striped table-sm">
  <thead>
    <tr>
      <th>Project</th>
      <th>Date</th>
      <th>Starting</th>
      <th>Ending</th>
      <th>+/-</th>
      <th>Duration</th>
      <th>Rate</th>
      <th>Total</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="9">
        <form method="post" action="/edit">
          <table>
            <tbody>
              <tr>
                <td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
                <td><input type="date" class="form-control form-control-sm"></td>
                <td><input type="time" class="form-control form-control-sm"></td>
                <td><input type="time" class="form-control form-control-sm"></td>
                <td><input type="number" step="0.25" class="form-control form-control-sm"></td>
                <td><input type="number" class="form-control form-control-sm" disabled=""></td>
                <td>
                  <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
                    <input type="number" class="form-control form-control-sm">
                  </div>
                </td>
                <td>
                  <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
                    <input disabled="" type="number" class="form-control form-control-sm">
                  </div>
                </td>
                <td>
                  <button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
                  <a href="/delete" role="button" class="btn btn-outline-danger btn-sm">Delete</a>
                </td>
              </tr>
              <tr>
                <td colspan="8">
                  <input type="text" class="form-control form-control-sm" placeholder="Notes">
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </td>
    </tr>
  </tbody>
</table>

I tried adding column classes (class="col-sm-4") to the header and detail rows, but that didn't work well.

The Fiddle.

isherwood
  • 58,414
  • 16
  • 114
  • 157
craig
  • 25,664
  • 27
  • 119
  • 205

1 Answers1

2

Seems to me you check all the boxes with a regular ol' table and a wee bit o' custom CSS. Why fight so hard to make the library do what you want?

To get the forms working, see this answer. Basically you can create a form element for each input row and then use the form attribute on any input in the table to associate it with the proper form.

Also, to be accessible your inputs all need labels. There are ways of doing that without them being visible in the page. It's important.

.table-striped-pairs tr:nth-child(4n-2) td,
.table-striped-pairs tr:nth-child(4n-3) td {
  background-color: #f2f2f2;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<table class="table table-sm table-striped-pairs">
  <thead>
    <tr>
      <th>Project</th>
      <th>Date</th>
      <th>Starting</th>
      <th>Ending</th>
      <th>+/-</th>
      <th>Duration</th>
      <th>Rate</th>
      <th>Total</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
      <td><input type="date" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="number" step="0.25" class="form-control form-control-sm"></td>
      <td><input type="number" class="form-control form-control-sm" disabled=""></td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input disabled="" type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
        <a href="/delete" role="button" class="btn btn-outline-danger btn-sm">Delete</a>
      </td>
    </tr>
    <tr>
      <td colspan="9">
        <input type="text" class="form-control form-control-sm" placeholder="Notes">
      </td>
    </tr>

    <tr>
      <td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
      <td><input type="date" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="number" step="0.25" class="form-control form-control-sm"></td>
      <td><input type="number" class="form-control form-control-sm" disabled=""></td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input disabled="" type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
        <a href="/delete" role="button" class="btn btn-outline-danger btn-sm">Delete</a>
      </td>
    </tr>
    <tr>
      <td colspan="9">
        <input type="text" class="form-control form-control-sm" placeholder="Notes">
      </td>
    </tr>

    <tr>
      <td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
      <td><input type="date" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="number" step="0.25" class="form-control form-control-sm"></td>
      <td><input type="number" class="form-control form-control-sm" disabled=""></td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input disabled="" type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
        <a href="/delete" role="button" class="btn btn-outline-danger btn-sm">Delete</a>
      </td>
    </tr>
    <tr>
      <td colspan="9">
        <input type="text" class="form-control form-control-sm" placeholder="Notes">
      </td>
    </tr>

    <tr>
      <td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
      <td><input type="date" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="number" step="0.25" class="form-control form-control-sm"></td>
      <td><input type="number" class="form-control form-control-sm" disabled=""></td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input disabled="" type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
        <a href="/delete" role="button" class="btn btn-outline-danger btn-sm">Delete</a>
      </td>
    </tr>
    <tr>
      <td colspan="9">
        <input type="text" class="form-control form-control-sm" placeholder="Notes">
      </td>
    </tr>
    <tr>
      <td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
      <td><input type="date" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="number" step="0.25" class="form-control form-control-sm"></td>
      <td><input type="number" class="form-control form-control-sm" disabled=""></td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input disabled="" type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
        <a href="/delete" role="button" class="btn btn-outline-danger btn-sm">Delete</a>
      </td>
    </tr>
    <tr>
      <td colspan="9">
        <input type="text" class="form-control form-control-sm" placeholder="Notes">
      </td>
    </tr>
    <tr>
      <td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
      <td><input type="date" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="time" class="form-control form-control-sm"></td>
      <td><input type="number" step="0.25" class="form-control form-control-sm"></td>
      <td><input type="number" class="form-control form-control-sm" disabled=""></td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
          <input disabled="" type="number" class="form-control form-control-sm">
        </div>
      </td>
      <td>
        <button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
        <a href="/delete" role="button" class="btn btn-outline-danger btn-sm">Delete</a>
      </td>
    </tr>
    <tr>
      <td colspan="9">
        <input type="text" class="form-control form-control-sm" placeholder="Notes">
      </td>
    </tr>
  </tbody>
</table>
isherwood
  • 58,414
  • 16
  • 114
  • 157