Html scaling row -
Html scaling row -
i have table layout
as can see first row on left scaling accordingly "notes" column. how can create left rows same height? this:
here fiddle layout. http://jsfiddle.net/cleverketchup/nhe26e8y/
and code:
<table cellspacing="1" cellpadding="5" width="100%" border="1"> <tr> <td rowspan="2">arrival<br/>atis 1</td> <td rowspan="2"></td> <td colspan="5">notes</td> </tr> <tr> <td colspan="5" rowspan="3">selected profiles:</td> </tr> <tr> <td>arrival<br/>atis 2</td> <td></td> </tr> <tr> <td>alt<br/>atis</td> <td></td> </tr> </table>
solution 1: css overflow
why don't utilize css td{ overflow:auto; }
in notes content <td>
?
why don't utilize table within table? way, have independent command of row width / height css?
i.e.:
<table cellspacing="0" cellpadding="0"> <tr> <td class="td1"> <!-- table 1 --> <table cellpadding="5" class="table1" height="300px" border="1" width="100%"> <tr> <td class="tdata"> arrival<br /> atis 1 </td> <td class="tdata"> info of atis 1 </td> </tr> <tr> <td class="tdata"> arrival<br /> atis 2 </td> <td class="tdata"> info of atis 2 </td> </tr> <tr> <td class="tdata"> alt<br /> atis </td> <td class="tdata"> info of atis </td> </tr> </table> </td> <td class="td2"> <!-- table 2 --> <table cellpadding="5" border="1" class="table2" height="300px" width="100%"> <tr> <td class="tnotes" height="32px" width="100%"> notes </td> </tr> <tr> <td colspan="5">selected profiles: selected profiles: </td> </tr> </table> </td> </tr> </table>
html html-table
Comments
Post a Comment