HTML не умещается на полной странице - PullRequest
Новая
       2

HTML не умещается на полной странице

0 голосов
/ 18 октября 2018

У меня есть код ниже, который не вписывается в полную страницу.Строка начинается с CPU: usr = 0,89% - это строка, которая не соответствует должным образом.

Строка, начинающаяся с CPU, должна содержать оранжевый фон.

Этот код генерируется Python, и мне нужно изменитьисправить эту проблему в скрипте Python.

перед исправлением в коде Python.Мне нужно было исправить вручную в html.

Может ли кто-нибудь мне помочь. 

<!DOCTYPE html>
<html>

<style>
  p {
    font-family: Calibri;
    font-size: 14px;
    font-weight: bolder;
    text-align: left;
  }

  p.fade {
    color: #CCCCCC;
    font-size: 14px;
  }

  em {
    font-style: italic;
    font-size: 16px;
    font-weight: lighter;
  }

  em.pass {
    font-style: italic;
    font-size: 16px;
    color: green;
  }

  em.fail {
    font-style: italic;
    font-size: 16px;
    color: red;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  hr {
    align: left;
    margin-left: 0px;
    width: 500px;
    height: 1px;
  }

  table {
    border-collapse: collapse;
  }

  .main_head {
    background-color: orange;
    border: none;
    align: left;
    margin-left: 0px;
    width: 2000px;

  }

  tr {
    padding: 4px;
    text-align: center;
    border-right: 2px solid #FFFFFF;
  }

  tr[data-type="QA"] {
    color: #ff0000 !important;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2
  }

  th {
    background-color: #cceeff;
    color: black;
    padding: 4px;
    border-right: 2px solid #FFFFFF;

  }


</style>

<body>
<table>
  <table>
    <tr data-type="QA">
      <td style='color:BlueViolet'>Details: TEST HTML</td>
    </tr>
  </table>
  <table>
    <th class="main_head" colspan=3> CPU: usr=0.89% sys=3.38% |ssssssssssssssssssssssssssssssss
      ------hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh---------------------------------------------------------------------------------------
    </th>
    <tr>
    </tr>
    <tr>
      <td>Name</td>
      <td>First Name</td>
      <td> Last Name</td>
      <td> Work</td>
      <td> Percentages</td>
    </tr>
  </table>
</table>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 18 октября 2018

Просто добавьте следующий код в CSS. 

body {
    margin: 0;
}

В настоящее время у вас нет сброса CSS, поэтому вам нужно вручную добавить код сброса CSS перед началом проекта.Чек https://necolas.github.io/normalize.css/

0 голосов
/ 18 октября 2018

Set colspan="5".

У вас есть 5 столбцов: 

<tr>
  <td>Name</td>
  <td>First Name</td>
  <td> Last Name</td>
  <td> Work</td>
  <td> Percentages</td>
</tr>

Таким образом, вы должны установить colspan="5" на 

<th class="main_head" colspan="5">
0 голосов
/ 18 октября 2018 

        <!DOCTYPE html>
        <html>

        <style>
        p {
            font-family : Calibri;
            font-size: 14px;
            font-weight: bolder;
            text-align : left;
        }

        p.fade {
            color : #CCCCCC;
            font-size: 14px;
        }
        em  {
            font-style : italic ;
            font-size : 16px;
            font-weight: lighter ;
        }
        em.pass {
            font-style : italic ;
            font-size : 16px;
            color: green ;
        }
        em.fail {
            font-style : italic ;
            font-size : 16px;
            color: red ;
        }

        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        hr {
            align: left ;
            margin-left: 0px ;
            width: 500px;
            height:1px;
        }

        table {
            border-collapse: collapse;
        }

        .main_head{
            background-color: orange;
            border: none;
            align: left ;
            margin-left: 0px ;
            width: 2000px;
            white-space: nowrap;
        }

        tr {
            padding: 4px;
            text-align: center;
            border-right:2px solid #FFFFFF;
        }
        tr[data-type="QA"] { color: #ff0000 !important; }
        tr:nth-child(even){background-color: #f2f2f2}
        th {
            background-color: #cceeff;
            color: black;
            padding: 4px;
            border-right:2px solid #FFFFFF;
            
        }


        </style>

        <body>
            <table>
<table>
<tr data-type="QA">
<td style='color:BlueViolet'>Details: TEST HTML  </td>
</tr>
</table>
<table>
<th class="main_head" colspan="5"> CPU: usr=0.89%   sys=3.38% |ssssssssssssssssssssssssssssssss ------hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh---------------------------------------------------------------------------------------</th>
<tr>
</tr>
<tr>
<td>Name</td>
<td>First Name</td>
<td> Last Name </td>
<td> Work </td>
<td> Percentages</td>
</tr>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...