HTML постоянный размер символа

Question

Я пытаюсь создать веб-страницу, используя datatable, где описание в первом столбце никогда не переносится.Это приложение JSF-Java.Я попытался определить максимальное количество символов и пробовал моноширинный шрифт, но безуспешно.Как этого достичь?

Обратите внимание, что количество точек (периодов) и X одинаковое, но X обертки.

РЕДАКТИРОВАТЬ: вот код из браузера.Я также попробовал предложение «white-space: nowrap», которое предотвратило перенос, но увеличило ширину column1, и я надеюсь на решение, которое позволит ширине столбца оставаться постоянной.Я прошу прощения за любую неуместность в этом вопросе, это мой первый.

html {
  font-size: 3vmax;
  color: #ffffff;
  background-color: #005dff;
  /* font-family: "Times New Roman", Times, serif; */
  font-family: "Courier New", monospace;
  box-sizing: border-box;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        . . . . . . . . . . . . . . .
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        X X X X X X X X X X X X X X X
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        a
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        b
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        c
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Вам необходимо применить следующее свойство CSS к элементу:

white-space: nowrap;

Это гарантирует, что текст никогда не будет перенесен на следующую строку.