Question 220597 in Html Question posted in
Some basic documentation can be found here.

How to make same items height for 2 (different) tables displayed side by side – HTML CSS

I have two, or more, different tables that are generated by a php loop; I want to make them all the same <li> item height for each table with different text:

<div class="table-1">
  <ul>
    <li>short text1</li>
    <li>short text1</li>
    <li>long text1 long text1 long text1 long text1 long text1 long text1 </li>
    <li>short text1</li>
  </ul>
</div>
<div class="table-2">
  <ul>
    <li>short text2</li>
    <li>long text2 long text2 long text2 long text2 long text2 long text2 </li>
    <li>short text2</li>
    <li>short text2</li>
    <li>short text2</li>
  </ul>
</div>
Tags:

2

Answers


  1. 0

    Not sure if this is what you were looking for but you could easily set the height for all li items by adding this to your CSS li { height: 40px }

    Or see example https://codepen.io/oldskool123/pen/poQqxVK

    Login or Signup to reply.
  2. 0

    To display the table side by side you have to add some display:flex to the list. Refer below code…

    HTML:

     <div class="d-flex">
<div class="table-1">
  <ul>
    <li>short text1</li>
    <li>short text1</li>
    <li>long text1 long text1 long text1 long text1 long text1 long text1 </li>
    <li>short text1</li>
  </ul>
</div>
<div class="table-2">
  <ul>
    <li>short text2</li>
    <li>long text2 long text2 long text2 long text2 long text2 long text2 </li>
    <li>short text2</li>
    <li>short text2</li>
    <li>short text2</li>
        <li>short text2</li>
    <li>short text2</li>
    <li>short text2</li>
        <li>short text2</li>
    <li>short text2</li>
    <li>short text2</li>
  </ul>
</div>
  </div>

    CSS:

    .d-flex{
  display:flex;
  gap:1rem;
}
.table-1,
.table-2{
border:1px solid red;
}

    Border added for visual purpose.
    Hope this solution works for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search