Qoragar

Если (насколько понял) проблема в том, что before/after накладываются на контент (кнопки) — есть один хитрый костыль, как убрать их ПОД контент блока (правда, могут быть проблемы с обратной совместимостью для совсем старых/редких браузеров).

На родительском div:

...
background-image: url("ВертикальнаяРамка.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100% calc(100% - (ВысотаВерхнейРамки×2)px);
 /*Рассчитываем высоту вертикального центрального блока
за вычетом верхней и нижней рамки*/
...
transform-style: preserve-3d;
 /*Последний параметр нужен для возможности
манипулирования before/after по глубине,
поскольку с ними не работает обычный z-index*/

На div::before:

width: 100%;
height: ВысотаВерхнейРамки;
background-image: url("ВерхняяРамка.png");
background-position: center;
background-repeat: no-repeat;
...
/*Позиционируем по верхнему краю блока*/
...
transform: translateZ(-1px); /*Уходит ПОД весь контент*/

На div::after:

width: 100%;
height: ВысотаВерхнейРамки;
background-image: url("ВерхняяРамка.png");
background-position: center;
background-repeat: no-repeat;
...
/*Позиционируем по нижнему краю блока*/
...
transform: scaleY(-1) translateZ(-1px); /*Отражается вертикально и уходит ПОД весь контент*/

Вот как-то так видится...

Увы, тут возможен лишь "костыль":

• Строка основной таблицы — два столбца. У строки запрет на перенос.
  
• В первом столбце "Текст 1-2-3-4-5".
  
• Во втором столбце — многострочная вложенная таблица с текстами.
  

Минусов у такого костыля немало, на зато точно не переносит "большую" ячейку...
¯\_(ツ)_/¯

То есть я смогу отображать, каждую А4 страницу как фотографию?

Простейший способ, строго на ванильном HTML+CSS+JS — iframe. Насколько помню, работает в любом более-менее современном браузере.

Дешёво и сердито:

<div id="BlockForPDFpages">
     <iframe class="elPDF" id="PDF_Page01" src=""></iframe> 
</div>

<style>
	.elPDF {
		display: block;
		position: relative;
		width: XX; /*Рассчитать ширину и высоту под пропорции страницы*/
		height: YY; /*Рассчитать ширину и высоту под пропорции страницы*/
		overflow: hidden; /*Убрать скроллбары*/
		z-index: 0;

		/*...
		Прочая стилизация iframe (позиционирование, рамки и т.д.)
		...*/
	}

	/*Накладываем поверх фрейма "защитный экран",
	чтобы контент внутри случайно не скроллился
	(плюс, как полезный побочный эффект — нельзя сохранить через ПКМ):*/
	#elPDF::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top 0;
		left: 0;
		background-color: rgba(0,0,0,0);
		pointer-events: none;
		z-index: 1;
	}
</style>

<script>
	function ViewPDFpage(PageNum) {
		document.getElementById("elPDF ").contentWindow.location =
			"./source.pdf"
			+ "#toolbar=0&page="
			+ String(PageNum)
			+ "&view=Fit";
	}

	ViewPDFpage(5); /*Во фрейме будет страница 5*/
</script>

Параметры — начинаются с #, разделитель &:

• toolbar=0 — скрывает всё, кроме самой страницы;
  
• page=String(PageNum) — номер страницы, которая откроется во фрейме;
  
• view=Fit — страница заполняет всю область фрейма по ширине и/или высоте.
  

Для многостраничного документа — запустить циклом генерацию фреймов в BlockForPDFpages (через document.write или innerHTML+=) и циклом ViewPDFpage с разными номерами страниц для каждого фрейма.

P.S. Понятно, что исходный вопрос уже решён "в лоб" через картинки. Всего лишь предложил более универсальный вариант — сугубо ради академического интереса (да и сам сейчас вожусь как раз с PDF на сайте)).

Чтобы место под картинку заранее резервировалось на странице — надо жёстко задать ширину и высоту изображения (или его контейнера) через атрибуты тега или в свойствах CSS.

Сервис Suno AI
Есть режим авто-генерации текста (например, по запросу "песня про ёжика"), и ручной режим со вставкой своих стихов. В запросе-описании указывается стиль исполнения и прочие пожелания.

Музыку делает не ахти какую оригинальную (точнее, совершенно не оригинальную), но для ИИ весьма впечатляюще. ))

Например:
Рэп-коммент...
Хэви-коммент...
)))