Поместите div под третьим td и измените его положение Y в зависимости от высоты третьего td

Question

Я изо всех сил пытаюсь разместить div под третьим td (7 под 6 на экране). Div (7) также должен изменить свою позицию Y в зависимости от высоты td (6).

1, 2, 4, 5, 7 изменяют свое содержимое динамически (оно может содержать теги <sub> & <sup>), а текст (6) должен быть выровнен по верхнему краю полей 4 и 5.

Если 6 пусто, то 7 должно быть на 6 позициях, выровненных по верху 4 и 5 полей. Поля должны быть той же ширины и высоты, что и на экране (4 - ~ width: 200px ;, 5 - ~ width: 120px;).

• Я попытался поместить этот div в таблицу, но из-за этого ящики стали ужасно большими.
• Также я пытался сделать таблицу внутри tr из 6 элементов, это также делает коробки некрасивыми.
• Когда вы даете таблице position absolute, то div не меняет своего положения.

Это сложная задача, которую я не могу выполнить уже неделю. Я также попытался сделать rowspan и третий tr, чтобы поставить 7 под 6, но rowspan также делает коробки большими (, как показано здесь ).

Допускается изменение кода html. Важно пройти через CSS, потому что он нужен для печати. И одна из самых больших проблем, когда вы пытаетесь решить это с помощью JS, заключается в том, что когда вы уменьшаете масштаб окна, элементы могут изменить его положение.

.detailName {
    margin-top: 10px;
}

.table-sources {
    width: 400px;
    margin-left: 40px;
    margin-top: 3px;
}

.table-wrap:first-child {
    margin-top: -10px;
}

.table-wrap {
    display: flex;
}

.table-vals {
    margin-bottom: 5px;
}

.table-vals th {
    max-width: 200px;
    text-align: left;
    font-size: 13px !important;
    font-weight: normal;
    vertical-align: top;
}

.table-vals .first-th {
    min-width: 200px;
}

.table-vals td {
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
}

.table-vals .second-th {
    float: left;
    position: relative;
    left: 15px;
    width: 98px;
}

.table-vals .first-td {
    border: 2px solid #192E7B;
}

.table-vals .second-td {
    position: relative;
    left: 15px;
    background: wheat;
}

.table-vals .third-th {
    position: relative;
    left: 40px;
}

.table-vals .third-td {
    font-size: 14px;
    font-weight: normal;
    position: relative;
    left: 30px;
    top: -20px;
    text-align: left;
}

.source-link {
    word-break: break-word;
    font-size: 12px;
    color: grey;
    position: absolute;
    width: 400px;
}

.detailName {
    display: block;
}

.detailName {
    font-weight: bold;
}

<div class="tables-wrap">
  <div class="table-wrap">
    <table class="table-vals">
      <tbody>
        <tr class="first-tr">
            <th class="first-th">ipsum dolor</th>
            <th class="second-th">ipsum dolor</th>
            <th class="third-th">ipsum</th>
        </tr>
        <tr class="second-tr">
          <td class="first-td">ipsum dolor</td>
          <td class="second-td" style="background:rgb(123, 161, 196);color:white;">ipsum dolor</td>
          <td class="third-td" style="/* top:-23px; */">Norddeutsches Tiefland</td>
        </tr>
      </tbody>
    </table>
  <div class="table-sources" style="position: relative; left: -120px; top: 31px;">
    <span class="detailName">Ipsum dolor</span><span class="source-link">Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor</span>
    </div>
  </div>
</div>

Answer 1

• 1000 1004 * Требования: пункт 6 на вашей диаграмме может присутствовать или отсутствовать. Пункт 7 должен переместиться вверх при отсутствии пункта 6. Верх пункта 6 (или верх пункта 7, если 6 отсутствует) должен выровняться с верхом пунктов 4 и 5.

Вот он с подзаголовком на месте:

Я добавил общий цвет фона для контраста в моем окне браузера.

Если вы удалите div .subTitle, элемент 6 на диаграмме (в настоящее время содержит 'Norddeutsches Tiefland'), вы увидите, что более длинный участок под ним (элемент 7 на вашей диаграмме) перемещается вверх и выравнивается с верхушками двух прямоугольников слева (элементы 4 и 5).

Вот он с удаленным .subTitle:

		* {
			box-sizing: border-box;
		}

		.table-vals {
			padding: 1rem;
			width: 900px;
			background: #FEE;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 2rem 0 2rem 2rem;
			font-size: 14px;
		}


		.first-row, .second-row {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;
			margin-bottom: 0.2rem;
		}

		.second-row {
			height: 200px;
		}

		.table-vals .ath {
			text-align: left;
			font-size: 13px;
			font-weight: normal;
		}

		.first-column {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 200px;
			margin: 0 1rem 0 0;
		}

		.second-column {
			width: 180px;
			/*border: 1px solid black;*/
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin: 0 1rem 0 0;
		}

		.table-vals .atd {
			font-size: 20px;
			font-weight: bold;
			height: 50px;
		}

		.second-row .first-column {
			border: 2px solid #192E7B;
			justify-content: center;
		}

		.second-row .second-column {
			background: rgb(123, 161, 196);
			color: white;
			justify-content: center;
		}

		.third-column {
			width: 400px;
			font-size: 14px;
			font-weight: normal;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
		}

		.source-link {
			word-break: break-word;
			font-size: 10px;
			line-height: 1;
			color: grey;
			position: absolute;
			width: 400px;
		}

		.detailName {
			display: block;
			font-weight: bold;
			line-height: 1;
		}

		.sources {
			width: 400px;
			line-height: 1;
		}

		.second-row .third-column .subTitle {
			font-size: 12px;
			font-weight: normal;
			line-height: 1;
			margin-bottom: 1rem;
		}

<div class="table-vals">
	<div class="first-row">
		<div class="ath first-column">ipsum dolor</div>
		<div class="ath second-column">ipsum dolor</div>
		<div class="ath third-column">ipsum</div>
	</div>
	<div class="second-row">
		<div class="atd first-column">ipsum dolor</div>
		<div class="atd second-column" style="">ipsum dolor</div>
		<div class="atd third-column"><div class="subTitle">Norddeutsches Tiefland</div>
			<div class="sources">
				<div class="detailName">Ipsum dolor</div>
				<div class="source-link">Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor</div>
			</div>
		</div>
	</div>
</div>