Aligning columns html

NoahDenis
November 20, 2023
162 views
0 votes
2 Answers

I’m using an unordered list to create a table. In the first row I only need 3 columns. All the other rows should have 4 columns but I cant align the first row to the first 3 columns of the other rows

<ul class="table">
  <li>
    <span class="cell">Name</span>
    <span class="cell">Country</span>
    <span class="cell">Age</span>
    <span></span>
  </li>
  <li>
    <form>
      <span class="cell"><input type="text" name="name" placeholder="" value="Ankit" readonly></span>
      <span class="cell"></span><input type="text" name="country" placeholder="" value="India" readonly></span>
      <span class="cell"></span><input type="text" name="age" placeholder="" value="20" readonly></span>
      <span class="cell_buttons">
                    <button class="edit">Edit</button>
                    <button class="save">Save</button>
                    <button class="delete">Delete</button>
                </span>
    </form>
  </li>
  <li>
    <form>
      <span class="cell"><input type="text" name="name" placeholder="" value="Shawn" readonly></span>
      <span class="cell"></span><input type="text" name="country" placeholder="" value="Canada" readonly></span>
      <span class="cell"></span><input type="text" name="age" placeholder="" value="26" readonly></span>
      <span class="cell_buttons">
                    <button class="edit">Edit</button>
                    <button class="save">Save</button>
                    <button class="delete">Delete</button>
                </span>
    </form>
  </li>
</ul>

Tags: css html

Answers

You have a number of extra </span> in your code. Remove those and the extraneous form tags.

Then use CSS Tables.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.table {
  display: table;
  border: 1px solid green;
  margin: 0em;
}

li {
  display: table-row;
  text-align: center;
}

li span {
  display: table-cell;
}

<ul class="table">
  <li>
    <span class="cell">Name</span>
    <span class="cell">Country</span>
    <span class="cell">Age</span>
    <span></span>
  </li>
  <li>
    <span class="cell"><input type="text" name="name" placeholder="" value="Ankit" readonly></span>
    <span class="cell"><input type="text" name="country" placeholder="" value="India" readonly></span>
    <span class="cell"><input type="text" name="age" placeholder="" value="20" readonly></span>
    <span class="cell_buttons">
                    <button class="edit">Edit</button>
                    <button class="save">Save</button>
                    <button class="delete">Delete</button>
                </span>

  </li>
  <li>

    <span class="cell"><input type="text" name="name" placeholder="" value="Shawn" readonly></span>
    <span class="cell"><input type="text" name="country" placeholder="" value="Canada" readonly></span>
    <span class="cell"><input type="text" name="age" placeholder="" value="26" readonly></span>
    <span class="cell_buttons">
                    <button class="edit">Edit</button>
                    <button class="save">Save</button>
                    <button class="delete">Delete</button>
                </span>
  </li>
</ul>

Hello? Just do like this if you dislike to delete tags. Let you change only CSS.

.table {
  display: table;
}

.table li {
  display: flex;
}

.table li span {
  flex-grow: 1;
  text-align: center;
}

<ul class="table">
  <li>
    <span class="cell">Name</span>
    <span class="cell">Country</span>
    <span class="cell">Age</span>
    <span></span>
  </li>
  <li>
    <form>
      <span class="cell"><input type="text" name="name" placeholder="" value="Ankit" readonly></span>
      <span class="cell"></span><input type="text" name="country" placeholder="" value="India" readonly></span>
      <span class="cell"></span><input type="text" name="age" placeholder="" value="20" readonly></span>
      <span class="cell_buttons">
        <button class="edit">Edit</button>
        <button class="save">Save</button>
        <button class="delete">Delete</button>
      </span>
    </form>
  </li>
  <li>
    <form>
      <span class="cell"><input type="text" name="name" placeholder="" value="Shawn" readonly></span>
      <span class="cell"></span><input type="text" name="country" placeholder="" value="Canada" readonly></span>
      <span class="cell"></span><input type="text" name="age" placeholder="" value="26" readonly></span>
      <span class="cell_buttons">
        <button class="edit">Edit</button>
        <button class="save">Save</button>
        <button class="delete">Delete</button>
      </span>
    </form>
  </li>
</ul>

Please signup or login to give your own answer.

Click here to cancel reply.