Вложенные строки таблицы HTML CSS

Я никогда не работал с Сложными таблицами HTML. Мне нужна таблица с вложенными столбцами и строками в ней. Я попытался создать его, но у него много таблиц, а количество границ появилось повсюду. Вот jsFiddle, который я пробовал. Итак, чего я хочу достичь:

  • Единый тег <table> для всей этой структуры
  • Несколько границ не должны отображаться.
  • Вся структура должна быть отдельной таблицей, строки не должны отделяться от ее позиции при изменении размера страницы (что происходит в моем случае)

Ответы

Ответ 1

Это ваша структура, которую вы хотели, не устанавливайте значение ширины в процентах, чтобы избежать потери текстуры во время изменения страницы

    <table border="1" width="800" height="100">
      <tr>
        <th colspan="7"></th>
        <th></th>
      </tr>
      <tr>
        <td colspan="7"></td>
        <td></td>
      </tr>
      <tr>
        <td rowspan="3"></td>
        <td></td>
        <td colspan="3"></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
    </table>

Ответ 2

Ну, точный результат не может быть выполнен только с одной таблицей. У вас есть ячейки, которые появляются на половине высоты или ширины другой ячейки. Это то, что не будет функционировать.

Итак, я создал вам эту структуру, которая приближается к ней:

<table>
    <colgroup>
        <col width="3%" span="2" />
        <col width="10%" />
        <col width="3%" />
        <col width="18%" />
        <col width="*" span="2" />
    </colgroup>
    <tr>
        <td colspan="6">x</td>
        <td>x</td>
    </tr>
    <tr>
        <td colspan="6">x</td>
        <td>x</td>
    </tr>
    <tr>
        <td rowspan="3">x</td>
        <td>x</td>
        <td colspan="3">x</td>
        <td>x</td>
        <td>x</td>
    </tr>
    <tr>

        <td rowspan="2">x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
    <tr>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
</table>

Обновлено Fiddle

Ответ 3

Зачем ему нужен такой стол? Бросьте ему камень.

В любом случае, не используйте border: xx xxx xxx старайтесь всегда использовать border-bottom, border-right, поэтому вы минимизируете количество строк.

Добавляйте цвет фона и его зависание, возможно, это сделает его более приемлемым.

Иначе я не знаю. молись.

Ответ 4

Затем вам нужно создать глобальную таблицу со строкой для каждой строки, которая у вас есть. И внутри ячеек этих строк делают другую таблицу, чтобы ее стиль, как вы хотите.

Вы говорите, что несколько границ не должны появляться, а затем создайте класс, чтобы показывать только границы таблиц внутри каждой ячейки, а не на других, так что у вас будут только нужные границы.

Помните, что глобальная таблица должна содержать все остальные таблицы. В одной таблице содержится все.

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