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> ?

solution 2: embedded table

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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -