Блог

Главная - Вопросы по программированию - html-таблица разрывается, когда слишком много текста разбивается на ячейки, и при печати выглядит не очень хорошо

html-таблица разрывается, когда слишком много текста разбивается на ячейки, и при печати выглядит не очень хорошо

#html #css #printing #html-table

Вопрос:

Итак,у меня есть школьный проект, в котором я должен создать файл html/css, в основном таблицы, которые хорошо выглядят при печати на листе формата А4, проблема в том, что некоторые блоки ячеек содержат более 40 символов, которые портят всю таблицу, каково решение этого, возможно, заставить принтер распечатать два листа формата а4, но я понятия не имею, как это сделать.

введите описание изображения здесь

 body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

img {
  width: 20%;
  margin-bottom: 15px;
  margin-left: 70px;
}

.header {
  display: flex;
}

* {
  font-weight: lighter;
  box-sizing: border-box;
}

.container {
  max-width: 70%;
  margin: 0 auto;
}

th {
  padding: 2px 5px;
  border: 1.5px solid black;
  text-align: left;
}

td {
  padding: 2px 5px;
  text-align: left;
}

table {
  border-collapse: collapse;
}

.padding {
  padding-right: 82px;
}

tr {
  border: 1.5px solid black;
}

td {
  border: 1.5px solid black;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
}

h2 {
  font-weight: lighter;
  font-size: 20px;
  padding: 0;
  color: #2C5197;
}

h1 {
  font-size: 35px;
  font-weight: lighter;
}

.num {
  border: none;
}

.border2 {
  border-bottom: none;
  border-top: none;
  border-left: 1.5px solid black;
}

.border3 {
  border-top: none;
  border-bottom: none;
}

.border3 td {
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
}

.border2 td {
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
}

.border td {
  border-bottom: none;
  border-left: 1.5px solid black;
  border-right: 1.5x solid black;
}

.border td {
  border: none;
}

.border {
  border-bottom: none;
  border-top: none;
}

.border td {
  border-bottom: none;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
}

.border1 td {
  border: none;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
}

.border1 {
  border: none;
  border-right: 1.5px solid black;
  border-left: 1.5px solid black;
}

.border5 {
  border-top: none;
  border-bottom: none;
}

.border5 td {
  border-top: none;
}

p {
  visibility: hidden;
  padding: 0;
  margin: 0;
}

.secondtable {
  margin-top: 80px;
}

.secondtable table {
  width: 50.3%;
}

.secondtable tbody td {
  text-align: center;
}

@page {
  size: A4 portrait;
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: 20px;
} 
 <div class="container">

  <div class="header">
    <h1>Measurement Report</h1>
    <img src="https://i.ibb.co/yFs5jxq/logo.png" alt="engineering quality">
  </div>


  <h2>Configuration</h2>
  <ul>
    <li>Device: 11-abcd-sp</li>
    <li>Start of Measurement: 18.08.2021 10:51</li>
    <li>End of Measurement: 18.08.2021 10:51</li>
    <li> Measurement Type: Meter Test</li>
  </ul>
  <h2>Tested Networks</h2>
  <table>
    <thead>
      <tr>
        <th>Provider</th>
        <th>T-Mobile DE</th>
        <th>T-Mobile DE</th>
        <th class='padding'>...</th>
        <th class='padding'></th>
        <th class='padding'></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Technology</td>
        <td>GSM</td>
        <td>LTE</td>
        <td class='padding'></td>
        <td class='padding'></td>
      </tr>
      <tr class="border1">
        <td>Band(s)</td>
        <td>900</td>
        <td>1</td>
        <td></td>
        <td></td>
      </tr>
      <tr class="border">
        <td></td>
        <td class="num">1800</td>
        <td>2</td>
        <td></td>
        <td></td>
      </tr>
      <tr class="border2">
        <td class="num"></td>
        <td class="num"></td>
        <td class="num">3</td>
        <td class="num"></td>
        <td class="num"></td>
      </tr>
      <tr class="border3">
        <td class="num"></td>
        <td class="num"></td>
        <td class="num">4</td>
        <td class="num"></td>
        <td class="num"></td>
      </tr>
      <tr class="border5">
        <td></td>
        <td></td>
        <td>
          <p>dog</p>
        </td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <div class="secondtable">
    <h2>Measurement Data</h2>

    <table>
      <thead>
        <tr>
          <th>Time</th>
          <th>Provider</th>
          <th>Technology</th>
          <th>RSSI</th>
          <th>RSRP</th>
          <th>RSRQ</th>
          <th>Band</th>
          <th>Cell ID</th>
          <th>LAC</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>01.09.2021 09:43:13</td>
          <td>T-Mobile (Germany)</td>
          <td>4G</td>
          <td>-80dBm</td>
          <td>-2347dBm</td>
          <td>-1000dBm</td>
          <td>blank</td>
          <td>blank</td>
          <td>blank</td>
          <td>blank</td>
        </tr>

        <tr>
          <td>21.12.2021 13:23:04</td>
          <td>Vodafone (Spain)</td>
          <td>5G</td>
          <td>-20dBm</td>
          <td>-1000dBm</td>
          <td>-80dBm</td>
          <td>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam quibusdam, veritatis deleniti eaque necessitatibus et a numquam quis reprehenderit nesciunt accusantium quisquam alias dolore distinctio repudiandae similique molestiae architecto!
            Totam beatae consequuntur, nulla debitis sed placeat voluptate tempora corporis ducimus.</td>
          <td>blank</td>
          <td>blank</td>
          <td>blank</td>
        </tr>

        <tr>
          <td>14.10.2021 16:00:12</td>
          <td>T-Mobile (America)</td>
          <td>4G</td>
          <td>-1000dBm</td>
          <td>-20dBm</td>
          <td>-20dBm</td>
          <td>blank</td>
          <td>blank</td>
          <td>blank</td>
          <td>blank</td>
        </tr>

        <tr>
          <td>13.01.2021 12:23:02</td>
          <td>T-Mobile (Italy)</td>
          <td>2G</td>
          <td>-2345dBm</td>
          <td>-80dBm</td>
          <td>-2345dBm</td>
          <td>blank</td>
          <td>blank</td>
          <td>blank</td>
          <td>blank</td>
        </tr>
      </tbody>
    </table>
  </div>


</div>

Комментарии:

1. Не уверен, что вы можете сделать в этой ситуации, кроме как отрезать большую часть текста

Ответ №1:

Можете ли вы распечатать его горизонтально? Если вы можете распечатать таблицу с поворотом на 90 градусов, вы можете увеличить ширину ячейки таблицы, содержащей более 40 слов.

По горизонтали я имею в виду печать таблицы в альбомной ориентации , и у вас будет больше места для размещения содержимого.

Метки: , ,