Waqas ahmad Waqas ahmad - 4 months ago 8
HTML Question

How it possible in table td has different hights using one table

I want to design table in

html
that would have different heights of
td
using only one table. Is it possible? If possible how can I get it done?

<table>
<tbody>
<td>height:30px</td>
<td>height:90px</td>
<td>height:60px</td>
<td>height:80px</td>
</tbody>
</table>


Something like this table :

enter image description here

Answer
 <style>
tr {
 height: auto;
 }
td {
 overflow: hidden;
 display: inline-block;
 white-space: nowrap;
 vertical-align: top;
 background-color: #3399ff;
 height: 100%;
 width: 75px;
 border: 1px solid black;
 }
td:nth-child(odd) {
 background-color: #1177dd;
 }
 #b {
 height: 200px;
 }
 #j {
 height: 90px;
 }
 #k {
 height: 180px;
 }
 </style>

<table>
<tbody>
<tr>
<td id="b">b</td>
<td id="j">j</td>
<td id="k">k</td>
</tr>
</tbody>
</table>
Comments