Как убрать пустые места в столбцах с помощью HTML5, CSS3

Question

Существует несколько столбцов, в которые данные будут извлекаться динамически.Таким образом, столбец с большим количеством данных будет иметь полную высоту.Другие столбцы в той же строке также будут занимать максимальную высоту (даже если у них мало данных). Таким образом, останется пустое пространство. Как мне удалить это пустое пространство.

 <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

единственный способ, которым я знаю, чтобы иметь «не выровненное» разделение ячеек в таблице, это использовать colspan и rowspan, но эти функции могут только соединять ячейки вместе, а не создавать изолированную ячейку (изолированную в том смысле, чтоон будет иметь свои собственные размеры, несмотря на соответствующую строку или столбец).

Если в теории ваш макет может быть возможен с table, то потребуется много кода, чтобы эти слияния клеток были в порядке и, возможно,нужен Javascript для определения размеров.

пример со строками строки:

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

В заключение , ваш макет будет гораздо проще сделать с помощью div и, в конечном итоге, div-оболочек, если вы хотите эмулировать строки или столбцы.Это также будет быстрее отображаться, table в настоящее время считается плохим выбором для организации макета.