Блог

Главная - Вопросы по программированию - как сделать ширину столбцов вложенной таблицы равной ширине родительской

как сделать ширину столбцов вложенной таблицы равной ширине родительской

#html #css #twig

Вопрос:

У меня проблема с вложенными таблицами. Проблема заключается в необходимости создания pdf-файла из html. Я использую вложенные таблицы, потому что это единственный способ, который позволяет мне разрывать страницы без разрыва строк. Я хочу добиться одинаковой ширины заголовка таблицы и тела таблицы, но я не могу сопоставить два столбца (прикрепленное изображение внизу моего вопроса) вот мой html

 @media print {
  tr {
    /*    page-break-before: avoid !important;*/
    /*    page-break-after: avoid !important;*/
  }
  tbody {
    display: table-row-group;
    page-break-inside: avoid;
  }
  tbody::after {
    display: block;
    page-break-before: avoid;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  @page {
    size: portrait;
    margin: 8mm 15mm 15mm 15mm;
  }
}


/*tbody::after {*/


/*    content: ''; display: block;*/


/*    page-break-after: always;*/


/*    page-break-inside: avoid;*/


/*    page-break-before: avoid;*/


/*}*/

.altRow table {
  width: 100%;
}


/* remove the padding for full width */

.altRow>td {
  padding: 0
}

body {
  font-size: small;
  font-family: "Source Sans Pro", sans-serif;
}

.tableProperties {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tableProperties>tr>td {
  width: 12.5%;
}

.positionsTable td {
  border: 1px solid black;
  border-collapse: collapse;
  table-layout: fixed;
}

.innerTable tr {
  border: none !important;
}

.innerTable tr:nth-of-type(1) {
  border-bottom: 1px solid black !important;
}

.innerTable2 td {
  border: 1px solid black;
}


/*.positionsTable th{*/


/*    border: 1px solid black;*/


/*}*/

.testowa * {
  padding: 0;
  margin: 0;
}

.textBold {
  font-weight: bold;
}

.correctionCol1 {
  width: 5%;
  text-align: center;
}

.correctionCol2 {
  width: 40%;
  text-align: left;
  text-indent: 20px;
}

.correctionCol3 {
  width: 10%;
  text-align: center;
}

.correctionCol4 {
  width: 15%;
  text-align: center;
}

.correctionCol5 {
  width: 6%;
  text-align: center;
}

.correctionCol6 {
  width: 8%;
  text-align: center;
}

.correctionCol7 {
  width: 8%;
  text-align: center;
}

.correctionCol8 {
  width: 8%;
  text-align: center;
}

.divBorder {
  border: 1px solid black;
  border-collapse: collapse;
} 
 <table class="tableProperties" style="border-collapse: collapse; border: 1px solid black">
  <thead style="border: 1px solid black">
    <tr>
      <th class="correctionCol1" style="border: 1px solid black; mso-cellspacing: 10px"> 'Lp'</th>
      <th class="correctionCol2" style="border: 1px solid black">'this is thead'</th>
      <th class="correctionCol3" style="border: 1px solid black">'Symbole'</th>
      <th class="correctionCol4" style="border: 1px solid black">sdfd</th>
      <th class="correctionCol5" style="border: 1px solid black">sdfs</th>
      <th class="correctionCol6" style="border: 1px solid black">sdfsf</th>
      <th class="correctionCol7" style="border: 1px solid black">sdfds</th>
      <th class="correctionCol8" style="border: 1px solid black">sssss</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="8" style="padding: 0">
        <div class="collapse">
          <table class="tableProperties" style="page-break-inside: avoid">
            <tbody>
              <tr style="border-bottom: 1px solid black">
                <td rowspan="6" class="correctionCol1" style="border-right: 1px solid black">1</td>
                <td rowspan="3" class="correctionCol2" style="border-right: 1px solid black">nazwa</td>
                <td rowspan="2" class="correctionCol3" style="border-right: 1px solid black">symbol</td>
                <td rowspan="2" class="correctionCol4" style="border-right: 1px solid black">blyat</td>
                <td rowspan="2" class="correctionCol5" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol6" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol7" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol8">coś</td>
              </tr>
              <tr></tr>
              <tr>
                <td rowspan="2" class="correctionCol3" style="border-right: 1px solid black">symbol</td>
                <td rowspan="2" class="correctionCol4" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol5" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol6" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol7" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol8">coś</td>
              </tr>
              <tr style="border-bottom: 1px solid black">
                <td rowspan="3" class="correctionCol2" style="border-right: 1px solid black">nazwa</td>
              </tr>
              <tr style="border-bottom: 1px solid black">
                <td rowspan="2" class="correctionCol3" style="border-right: 1px solid black">symbol</td>
                <td rowspan="2" class="correctionCol4" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol5" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol6" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol7" style="border-right: 1px solid black">coś</td>
                <td rowspan="2" class="correctionCol8">coś</td>
              </tr>
              <tr></tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

проблема

Метки: