CODEWITHSUNDEEP
htmlcss
KyiKyi
KyiKyi

Reputation: 83

How to make middle TD higher than side ones?

I have table with 3 cells, and I want to make middle one higher than side ones, so for example middle one's height is 300px and side one's is 200px. I gave middle one seperate class than side ones and I set middle one to 300px and side ones to 200px. But they are still the same height, why?

#mid {
  width: 600px;
  height: 400px;
  border: solid 1px black;
}

.side {
  width: 300px;
  height: 300px;
  border: solid 1px black;
}
<table>
  <tr>
    <td class="side"></td>
    <td id="mid"></td>
    <td class="side"></td>
  </tr>
</table>

Upvotes: 2

Views: 46

Answers (2)

Pete
Pete

Reputation: 58462

You should only use tables for tabular data and not for layout. What you are trying to do is not achievable with a table as all table cells in a row will be the same height as the tallest cell of that row.

Instead you should use divs, in the following example I have used flexbox to align the divs in a row:

.container {
  display: flex;
  width: 1200px;
  margin: auto;
}

.mid {
  width: 600px;
  height: 400px;
  border: solid 1px black;
}

.side {
  width: 300px;
  height: 300px;
  border: solid 1px black;
}
<div class="container">
  <div class="side"></div>
  <div class="mid"></div>
  <div class="side"></div>
</div>

Upvotes: 4

Karthik Ganesan
Karthik Ganesan

Reputation: 4222

LIke others have mentioned in comments you are better off using a div or some other tags but if you still want to use table you can do something like this

<table>

          <tr>
               <td>&nbsp;</td>
               <td id = "mid" rowspan="2"></td>
               <td></td>
           </tr>
          <tr>
               <td class = "side"></td>
               <td></td>
               <td class ="side"></td>
           </tr>
  </table>

here is a fiddle

https://jsfiddle.net/vdadekvL/28/

Upvotes: 1

Related Questions