положение текста в вертикальной таблице грязное, как я могу это решить? - PullRequest
Новая
       1

положение текста в вертикальной таблице грязное, как я могу это решить?

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

Изначально я хочу создать заголовок таблицы, как показано на рисунке ниже

enter image description here

В последние дни я не нашел решения этой проблемы.Я попытался vertical-aligment, text-align, table-layout:fixed, чтобы решить эту проблему.Но все еще не может быть динамичным, как таблица, которую я хочу на картинке выше. 

.table-print tr td {
    border: 1px solid black;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.table-print {
    border-collapse: collapse;
    width: 100%;
}
.verticalTable {
    text-align:center;
    white-space:nowrap;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}
.verticalTable p {
    margin:0 -100% ;
    display:inline-block;
}
.verticalTable p:before {
    content:'';
    width:0;
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}
table {
    text-align:center;
    table-layout : fixed;
    width:150px
}
<div style="width: 700px;">
    <table class="arial-font table-print">
        <thead>
            <tr>
                <td rowspan="2"><b>Number</b></td>
                <td rowspan="2" width="100px"><b>Regencies</b></td>
                <td rowspan="2"><b>Facilities</b></td>
                <td rowspan="2"><b>Target Number of Facilities Checked</b></td>
                <td colspan="2">Check up result</td>
                <td colspan="8">Description of Findings</td>
                <td colspan="6">Follow-up</td>
            </tr>
            <tr>
                <td class="verticalTable"><p>Good</p></td>
                <td class="verticalTable"><p>Findings</p></td>
                <td class="verticalTable"><p>Licensing</p></td>
                <td class="verticalTable"><p>CPOB/CPKB/CPPB</p></td>
                <td class="verticalTable"><p>Unlisted Products</p></td>
                <td class="verticalTable"><p>TMS Mutu/Label</p></td>
                <td class="verticalTable"><p>Materials / Products are prohibited</p></td>
                <td class="verticalTable"><p>Administration</p></td>
                <td class="verticalTable"><p>Hygiene & Sanitation</p></td>
                <td class="verticalTable"><p>Other</p></td>
                <td class="verticalTable"><p>Coaching</p></td>
                <td class="verticalTable"><p>Warning</p></td>
                <td class="verticalTable"><p>Hard Warning</p></td>
                <td class="verticalTable"><p>Temporary Dismissal of Activities</p></td>
                <td class="verticalTable"><p>Termination of Activities</p></td>
                <td class="verticalTable"><p>ProJustitia</p></td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

Я хочу, чтобы стол был таким же широким, как <div style="width: 700px;">.

Надеюсь, вы мне поможете.Спасибо.:)

Ответы [ 3 ]

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

Я бы порекомендовал посмотреть на writing-mode для вертикального текста.

Свойство CSS в режиме письма определяет, будут ли строки текста располагаться горизонтально или вертикально, а также направление вкоторый блокирует прогресс.

MDN

Вам все равно придется работать с размером шрифта, так как вы пытаетесь втиснуть очень много в 700px ...но это должно сделать его более управляемым. 

.table-print tr td {
  border: 1px solid black;
  font-size: 14px;
}

.table-print {
  border-collapse: collapse;
  width: 100%;
}

.verticalTable {
  text-align: center;
}

td b,
.verticalTable p {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

table {
  table-layout: fixed;
  width: 100%;
  text-align: center;
}
<div style="width: 700px;">
  <table class="arial-font table-print">
    <thead>
      <tr>
        <td rowspan="2"><b>Number</b></td>
        <td rowspan="2"><b>Regencies</b></td>
        <td rowspan="2"><b>Facilities</b></td>
        <td rowspan="2"><b>Target Number of Facilities Checked</b></td>
        <td colspan="2">Check up result</td>
        <td colspan="8">Description of Findings</td>
        <td colspan="6">Follow-up</td>
      </tr>
      <tr>
        <td class="verticalTable">
          <p>Good</p>
        </td>
        <td class="verticalTable">
          <p>Findings</p>
        </td>
        <td class="verticalTable">
          <p>Licensing</p>
        </td>
        <td class="verticalTable">
          <p>CPOB/CPKB/CPPB</p>
        </td>
        <td class="verticalTable">
          <p>Unlisted Products</p>
        </td>
        <td class="verticalTable">
          <p>TMS Mutu/Label</p>
        </td>
        <td class="verticalTable">
          <p>Materials / Products are prohibited</p>
        </td>
        <td class="verticalTable">
          <p>Administration</p>
        </td>
        <td class="verticalTable">
          <p>Hygiene & Sanitation</p>
        </td>
        <td class="verticalTable">
          <p>Other</p>
        </td>
        <td class="verticalTable">
          <p>Coaching</p>
        </td>
        <td class="verticalTable">
          <p>Warning</p>
        </td>
        <td class="verticalTable">
          <p>Hard Warning</p>
        </td>
        <td class="verticalTable">
          <p>Temporary Dismissal of Activities</p>
        </td>
        <td class="verticalTable">
          <p>Termination of Activities</p>
        </td>
        <td class="verticalTable">
          <p>ProJustitia</p>
        </td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
0 голосов
/ 20 сентября 2018

Можете догнать на моей скрипке jsfiddle.net/alyeah/ny1h546d/

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

Итак, я вынул пробел без переноса, изменил ориентацию текста, изменил ширину таблицы на 700px и удалил формат таблицы исправлений: 

.table-print tr td {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.table-print {
  border-collapse: collapse;
  width: 100%;
}

.verticalTable {
  text-align: center;
  /*white-space:nowrap;*/
  transform: rotate(-90deg);
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.verticalTable p {
  margin: 0 -100%;
  display: inline-block;
}

.verticalTable p:before {
  content: '';
  width: 0;
  padding-top: 110%;
  /* takes width as reference, + 10% for faking some extra padding */
  display: inline-block;
  vertical-align: middle;
}

table {
  text-align: center;
  /*table-layout : fixed;*/
  width: 700px;
}
<div style="width: 700px;">
  <table class="arial-font table-print">
    <thead>
      <tr>
        <td rowspan="2"><b>Number</b></td>
        <td rowspan="2" width="100px"><b>Regencies</b></td>
        <td rowspan="2"><b>Facilities</b></td>
        <td rowspan="2"><b>Target Number of Facilities Checked</b></td>
        <td colspan="2">Check up result</td>
        <td colspan="8">Description of Findings</td>
        <td colspan="6">Follow-up</td>
      </tr>
      <tr>
        <td class="verticalTable">
          <p>Good</p>
        </td>
        <td class="verticalTable">
          <p>Findings</p>
        </td>
        <td class="verticalTable">
          <p>Licensing</p>
        </td>
        <td class="verticalTable">
          <p>CPOB/CPKB/CPPB</p>
        </td>
        <td class="verticalTable">
          <p>Unlisted Products</p>
        </td>
        <td class="verticalTable">
          <p>TMS Mutu/Label</p>
        </td>
        <td class="verticalTable">
          <p>Materials / Products are prohibited</p>
        </td>
        <td class="verticalTable">
          <p>Administration</p>
        </td>
        <td class="verticalTable">
          <p>Hygiene & Sanitation</p>
        </td>
        <td class="verticalTable">
          <p>Other</p>
        </td>
        <td class="verticalTable">
          <p>Coaching</p>
        </td>
        <td class="verticalTable">
          <p>Warning</p>
        </td>
        <td class="verticalTable">
          <p>Hard Warning</p>
        </td>
        <td class="verticalTable">
          <p>Temporary Dismissal of Activities</p>
        </td>
        <td class="verticalTable">
          <p>Termination of Activities</p>
        </td>
        <td class="verticalTable">
          <p>ProJustitia</p>
        </td>
      </tr>
    </thead>
    <tbody>

    </tbody>

  </table>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...