CODEWITHSUNDEEP
cssflexbox
chatii
chatii

Reputation: 53

Table height does not stretch in Flexbox

.flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

table {
  width: 48%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid gray;
  padding: 5px;
}
<div class="flex">
  <table>
    <tbody>
    <tr>
      <th>1st Table</th>
    </tr>
    <tr>
      <td>
      <p>
        I want to be <br>
        the same height<br>
        as the next table
      </p>
      </td>
    </tr>
    </tbody>
  </table>

  <table>
    <tbody>
    <tr>
      <th>2nd Table</th>
    </tr>
    <tr>
      <td>
      <p>
        This text has 4 lines<br>
        This text has 4 lines<br>
        This text has 4 lines<br>
        This text has 4 lines
      </p>
      </td>
    </tr>
    </tbody>
  </table>
</div>

I'd like to match the highest table among the tables with unknown heights, but how can I do it?

In the case of div, there is no problem with "align-items: stretch;"

I tried "align-items: stretch;", but the height did not change. If possible, I'd like to extend the height of "th" by "td" without changing its height, but do I have to use JavaScript?

Upvotes: 4

Views: 7243

Answers (3)

Asons
Asons

Reputation: 87251

Since Flexbox being one of the newest edition to CSS and Table being one of the oldest, they won't play along well together, and not mainly because of the age difference, but the Table element specs. (and inconsistent behavior cross browser) give plenty of room for interpretations.

In this case, add a wrapper and give the table a height.

.flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

.flex > div {
  width: 48%;                          /* added  */
}

table {
  height: 100%;                        /*  added  */
  width: 100%;
  border-collapse: collapse;
}

td {
  height: 100%;                        /*  added  */
}

th, td {
  border: 1px solid gray;
  padding: 5px;
}
<div class="flex">
  <div>
    <table>
      <tbody>
        <tr>
          <th>1st Table</th>
        </tr>
        <tr>
          <td>
            <p>
              I want to be <br> the same height<br> as the next table
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <table>
      <tbody>
        <tr>
          <th>2nd Table</th>
        </tr>
        <tr>
          <td>
            <p>
              This text has 4 lines<br> This text has 4 lines<br> This text has 4 lines<br> This text has 4 lines
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Upvotes: 3

Dipnesh Parakhiya
Dipnesh Parakhiya

Reputation: 542

.flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

table {
  width: 48%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid gray;
  padding: 5px;
}
td {
  height: 150px;
}
<div class="flex">
  <table>
    <tbody>
    <tr>
      <th>1st Table</th>
    </tr>
    <tr>
      <td>
      <p>
        I want to be <br>
        the same height<br>
        as the next table
      </p>
      </td>
    </tr>
    </tbody>
  </table>

  <table>
    <tbody>
    <tr>
      <th>2nd Table</th>
    </tr>
    <tr>
      <td>
      <p>
        This text has 4 lines<br>
        This text has 4 lines<br>
        This text has 4 lines<br>
        This text has 4 lines
      </p>
      </td>
    </tr>
    </tbody>
  </table>
</div>

Upvotes: 0

Nawaz Ghori
Nawaz Ghori

Reputation: 591

td {height: 500px;}You can use fixed height for all tables.

Upvotes: 0

Related Questions