Tableting CSS проблема форматирования столбца

Question

Во-первых, я не программист, пожалуйста, будьте осторожны. Я пробовал несколько способов изменить первый столбец во всех таблицах, чтобы остановить перенос текста. Теперь столбец не выделяет дату, а текст очень маленький. Ниже приведен код. Помощь будет принята с благодарностью.

.tablepress td {
    border: 1px solid #DDDDDD;
    font-size: 100%;
}

.tablepress td strong {
    font-size: 80%;
}

.person {
    color: #930252;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.entry-content .tablepress {
    width: auto;
    margin: 0 auto 1em;
}

.tablepress-id-12 .column-1,
.tablepress-id-13 .column-1,
.tablepress-id-28 .column-1,
.tablepress-id-27 .column-1,
.tablepress-id-34 .column-1,
.tablepress-id-35 .column-1,
.tablepress-id-36 .column-1,
.tablepress-id-64 .column-1,
.tablepress-id-65 .column-1,
.tablepress-id-67 .column-1,
.tablepress-id-68 .column-1,
.tablepress-id-71 .column-1,
.tablepress-id-72 .column-1,
.tablepress-id-63 .column-1,
.tablepress-id-69 .column-1,
.tablepress-id-82 .column-1,
.tablepress-id-37 .column-1,
.tablepress-id-84 .column-1,
.tablepress-id-85 .column-1,
.tablepress-id-101 .column-1,
.tablepress-id-99 .column-1,
.tablepress-id-102 .column-1 {
    font-size: 300%;
    min-width: 120px;
}

Answer 1

Есть лучшие способы сделать это.

Таблица имеет структуру строк и столбцов.

Строки являются элементами <tr>. Внутри <tr> у вас есть два варианта использования: <th>, обычно используемый для заголовков, и <td>, обычно используемый для содержимого.

Итак, если у вас есть такая таблица:

.table thead tr th:first-child {
  background-color: blue;
  color: cyan;
}

.table tbody tr td:first-child {
  background-color: blue;
  color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/css/foundation.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
     <tr>
       <th>Person Name</th>
       <th>Person Age</th>
       <th>Actions</th>
     </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
  </tbody>
</table>

Как вы могли видеть, CSS работает с селекторами, есть более простые и более сложные. В этом случае вам нужен первый ребенок. Поскольку для всей таблицы нет определения столбцов, вам нужно повлиять на каждый первый столбец каждой строки.

Вот что делает правило tr td:first-child. Я добавил немного конкретности только для примера.

Answer 2

Вы можете найти ответ здесь: { ссылка }

.tablepress td:nth-of-type(1) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px; <-- optional
}

Кроме того, если вы хотите sh изменить размер шрифта, используйте em, rem, px или vw.

font-size: 14px