Html - Align input fields within a table

Jon
October 13, 2023
265 views
1 vote
2 Answers

I’m trying to align input fields to all start at the same point but the text labels are different lengths, so the input fields naturally start at different distances. How can I align them all to start at the same time?

I’ve tried to align the inputs to the right, align text to the left, etc. and nothing seems to work. Here is my code below:

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  padding: 8px;
  text-align: left;
}

<table>
  <tbody>
    <!-- Row 1 -->
    <tr>
      <td>
        <label for="row1col1">Example 12345:</label>
        <input type="text" id="row1col1" name="row1col1">
      </td>
      <td>
        <label for="row1col2">An example:</label>
        <input type="text" id="row1col2" name="row1col2">
      </td>
    </tr>
    <!-- Row 2 -->
    <tr>
      <td>
        <label for="row2col1">very long label here:</label>
        <input type="text" id="row2col1" name="row2col1">
      </td>
      <td>
        <label for="row2col2">short label:</label>
        <input type="text" id="row2col2" name="row2col2">
      </td>
    </tr>
    <!-- Row 3 -->
    <tr>
      <td>
        <label for="row3col1">Label:</label>
        <input type="text" id="row3col1" name="row3col1">
      </td>
      <td>
        <label for="row3col2">label123:</label>
        <input type="text" id="row3col2" name="row3col2">
      </td>
    </tr>
    <!-- Row 4 -->
    <tr>
      <td>
        <label for="row4col1">etc:</label>
        <input type="text" id="row4col1" name="row4col1">
      </td>
      <td>
        <label for="row4col2">etc:</label>
        <input type="text" id="row4col2" name="row4col2">
      </td>
    </tr>
    <!-- Row 5 -->
  </tbody>
</table>

Tags: css html

Answers

You can make use of flexbox to achieve your result.

I have wrapped each td elements in a div with class input group.
Applied display: flex to the input group and aligned items to center.
Finally I have applied a fixed width to all labels(150px). You can adjust this as per your requirement.

You can try something like below:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    
    th,
    td {
      padding: 8px;
      text-align: left;
    }
    
    .input-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .input-group label {
      width: 150px;
      /* can be adjusted as per need */
    }
  </style>

</head>

<body>
  <table>
    <tbody>
      <!-- Row 1 -->
      <tr>
        <td>
          <div class="input-group">
            <label for="row1col1">Example 12345:</label>
            <input type="text" id="row1col1" name="row1col1">
          </div>
        </td>
        <td>
          <div class="input-group">
            <label for="row1col2">An example:</label>
            <input type="text" id="row1col2" name="row1col2">
        </td>
        <div>
      </tr>
      <!-- Row 2 -->
      <tr>
        <td>
          <div class="input-group">
            <label for="row2col1">very long label here:</label>
            <input type="text" id="row2col1" name="row2col1">
          </div>
        </td>

        <td>
          <div class="input-group">
            <label for="row2col2">short label:</label>
            <input type="text" id="row2col2" name="row2col2">
          </div>
        </td>
      </tr>
      <!-- Row 3 -->
      <tr>
        <td>
          <div class="input-group">
            <label for="row3col1">Label:</label>
            <input type="text" id="row3col1" name="row3col1">
          </div>
        </td>
        <td>
          <div class="input-group">
            <label for="row3col2">label123:</label>
            <input type="text" id="row3col2" name="row3col2">
          </div>
        </td>
      </tr>
      <!-- Row 4 -->
      <tr>
        <td>
          <div class="input-group">
            <label for="row4col1">etc:</label>
            <input type="text" id="row4col1" name="row4col1">
          </div>
        </td>
        <td>
          <div class="input-group">
            <label for="row4col2">etc:</label>
            <input type="text" id="row4col2" name="row4col2">
          </div>
        </td>
      </tr>
      <!-- Row 5 -->
    </tbody>
  </table>
</body>

You could use a TD for each item instead of one per pair of item

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  padding: 8px;
  text-align: left;
}

<table>
  <tbody>
    <!-- Row 1 -->
    <tr>
      <td>
        <label for="row1col1">Example 12345:</label>
      </td>
      <td>
        <input type="text" id="row1col1" name="row1col1">
      </td>
      <td>
        <label for="row1col2">An example:</label>
      </td>
      <td>
        <input type="text" id="row1col2" name="row1col2">
      </td>
    </tr>
    <!-- Row 2 -->
    <tr>
      <td>
        <label for="row2col1">very long label here:</label>
      </td>
      <td>
        <input type="text" id="row2col1" name="row2col1">
      </td>
      <td>
        <label for="row2col2">short label:</label>
      </td>
      <td>
        <input type="text" id="row2col2" name="row2col2">
      </td>
    </tr>
    <!-- Row 3 -->
    <tr>
      <td>
        <label for="row3col1">Label:</label>
      </td>
      <td>
        <input type="text" id="row3col1" name="row3col1">
      </td>
      <td>
        <label for="row3col2">label123:</label>
      </td>
      <td>
        <input type="text" id="row3col2" name="row3col2">
      </td>
    </tr>
    <!-- Row 4 -->
    <tr>
      <td>
        <label for="row4col1">etc:</label>
      </td>
      <td>
        <input type="text" id="row4col1" name="row4col1">
      </td>
      <td>
        <label for="row4col2">etc:</label>
      </td>
      <td>
        <input type="text" id="row4col2" name="row4col2">
      </td>
    </tr>
    <!-- Row 5 -->
  </tbody>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Align input fields within a table

Answers