Я пытаюсь вставить таблицу с предопределенными html и css, такими как:
<style>table, th, td {
padding: 2px;
border: 1px solid black;
border-collapse: collapse;
width: 630px;
table-layout: fixed;
}
</style>
<table style="margin: 3pxborder: 5px solid black" >
<tr style="background-color: #aeaeae" >
<th> </th>
<th colspan=1 style="color: white" >header1</th>
<th colspan=1 style="color: white" >header2</th>
</tr>
<tr style="background-color: white;table-layout: fixed" >
<td style="padding: 1rem" >Value1</td>
<td style="padding: 1rem" >11</td>
<td style="padding: 1rem" >12</td>
</tr>
<tr style="background-color: white;table-layout: fixed" >
<td style="padding: 1rem" >Value2</td>
<td style="padding: 1rem" >21</td>
<td style="padding: 1rem" >22</td>
</tr>
</table>
в уже существующий файл html с заполнителями, в которых значения таблицы будут go. Я использую jinja2 и шаблонизатор, файл выглядит следующим образом после замены заполнителей на таблицу:
<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
</head>
<body style="margin: 0;">
<div id="p5" style="overflow: hidden; position: relative; background-color: white; width: 909px; height: 1286px;">
<!-- Begin shared CSS values -->
<style class="shared-css" type="text/css" >
.t {
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: scale(0.25);
-ms-transform: scale(0.25);
transform: scale(0.25);
z-index: 2;
position: absolute;
white-space: pre;
overflow: visible;
line-height: 1.5;
}
</style>
<!-- End shared CSS values -->
<!-- Begin inline CSS -->
<style type="text/css" >
.s1_5{
FONT-SIZE: 67.5px;
FONT-FAMILY: Calibri_5;
color: rgb(0,0,0);
}
</style>
<!-- End inline CSS -->
<!-- Begin embedded font definitions -->
<style id="fonts5" type="text/css" >
@font-face {
font-family: Calibri-Bold_9;
src: url("fonts/Calibri-Bold_9.woff") format("woff");
}
</style>
<!-- End embedded font definitions -->
<IMG STYLE="position:absolute; TOP:152px; LEFT:130px; WIDTH:650px; HEIGHT:460px" SRC="picture.png">
<style>table, th, td {
padding: 2px;
border: 1px solid black;
border-collapse: collapse;
font-family:calibri;
FONT-SIZE: 67.5px;
width: 630px;
table-layout: fixed;
}
</style>
<table style="margin: 3pxborder: 5px solid black" >
<tr style="background-color: #aeaeae" >
<th> </th>
<th colspan=1 style="color: white" >header1</th>
<th colspan=1 style="color: white" >header2</th>
</tr>
<tr style="background-color: white;table-layout: fixed" >
<td style="padding: 1rem" >Value1</td>
<td style="padding: 1rem" >11</td>
<td style="padding: 1rem" >12</td>
</tr>
<tr style="background-color: white;table-layout: fixed" >
<td style="padding: 1rem" >Value2</td>
<td style="padding: 1rem" >21</td>
<td style="padding: 1rem" >22</td>
</tr>
</table>
<!-- Begin page background -->
<div id="pg5Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"></div>
<!-- End page background -->
</div>
</body>
</html>
Я попытался вставить часть css в раздел, где определен css, но кажется, что он не распознается так, как если бы вышеупомянутое таблица вставляется в один файл. Файл с заполнителями разделен на общий и встроенный css. Какой раздел будет назначен css, принадлежащий таблице? В конечном счете, таблица должна располагаться ниже того места, где должна быть картинка, и столбцы должны соответствующим образом корректироваться по ширине, но попытка изменить значения в разделе css, похоже, не дает никакого эффекта.