如何使用HTML5，CSS3删除列中的空白

Question

There are multiple columns in which the data would be fetched dynamically. So the column which have more data would take the complete height. The other columns in the same row, would also consume the maximum height (even though they don't have much data) So, there would be empty space left.How do i remove this empty space.

 <td style="text-align: center;height:100%;">
 <table style="border-collapse:collapse; margin: -6px -14px -7px -11px; 
width:100%;height:100%;>
<tr>
    <td style="height:100%;" >
        <table  style="width:100%;height:100%" ><tr > 
            <td height="100%" ng-repeat="--">
                -- multiple div and span blocks used to loop multiple times- 
        </td></tr></table>

Answer 1

the only way i know to have "not aligned" cell separations in a table is to use colspan and rowspan , but these functionalities can only fuse cells together, not create an isolated cell (isolated in the sense that it would have it's own dimensioning despite the row or column it corresponds).

If in theory your layout could be possible with a table , it would involve a lot of code to have these cell fusions OK and probably need javascript for the dimensioning.

example with rowspan:

 <table border="1"> <tr> <td rowspan="2">A</td><td>B</td><td>C</td> </tr> <tr> <td rowspan="2">B</td><td>C</td> </tr> <tr> <td>A</td><td>C</td> </tr> </table> 

In conclusion , your layout would be much more easily done with div and eventually wrapper divs if you want to emulate rows or columns. This will also be quicker to render, table is nowadays considered a bad choice to organize a layout.