две таблицы перекрывающие друг друга html


две таблицы перекрывающие друг друга html

19.11.2020 03:05:58 Просмотров 52 Источник

Я пытаюсь добавить вертикальные линии в свою таблицу, которая выравнивается с заголовками, и я использую "border-collapse: separate", а также colspan, который варьируется от 1 до любого числа. Вот образ, чтобы представить себе это enter image description here

Имея в виду, что ячейка 1 имеет colspan 3, а ячейка 2 имеет colspan 2

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

<div id="app">
  <h2>Todos:</h2>
  <ol>
            <table
            BORDER
        >
            <thead>
                <tr>
                    <th >
                        H1
                    </th>
                    <th
                    >
                        H2
                    </th>
                    <th
                    >
                        H3
                    </th>
                    <th
                    >
                        H4
                    </th>
                    <th
                    >
                        H5
                    </th>
                </tr>
            </thead>
            <tbody>
              <td colspan="3">
                Cell1
              </td>
              <td colspan="2">
                Cell2
              </td>
            </tbody>
        </table>
  </ol>
</div>

Вот скрипка стола

http://jsfiddle.net/vrL9s7ft/6/

У вопроса есть решение - Посмотреть?

Ответы - две таблицы перекрывающие друг друга html / two tables overlapping each other html

Является ответом!
Dhruvi Makvana

19.11.2020 03:49:05

Я приложил здесь рабочий пример http://jsfiddle.net/whjnt5o2/1/

th, td {
  border: 1px solid black;
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  text-align: center;
}

table{
  border-spacing: 0;
}

table.background-table{
  position: absolute;
}

table.background-table th, table.background-table td {
  border: 1px dashed gray;
  top: 0;
}
<div>
<table class="background-table">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
      <th>H4</th>
      <th>H5</th>
    </tr>
  </thead>
  <tbody>
    <td colspan="3">
      Cell1
    </td>
    <td colspan="2">
      Cell2
    </td>
  </tbody>
</table>
</div>

Помочь в развитии проекта:
Закрыть X