Атрибут nowrap тега <td> — заборона переносу рядка

Атрибут nowrap - являється логічним атрибутом.

Додавання атрибута nowrap до елементу <td> змушує текст всередині осередку відображатися без переносів, одним суцільним рядком. Неправильне використання цього атрибута може привести до того, що таблиця буде занадто широкою і не поміститься цілком на веб-сторінку. Як наслідок, з'явиться горизонтальна смуга прокрутки. У будь-якому випадку, користуватися подібною таблицею буде незручно, через що застосування атрибута nowrap засуджується.

правити

Загальний опис

правити

Нотатка

Використання цього атрибута засуджується специфікацією HTML, валідний код виходить тільки при використанні перехідного <! DOCTYPE>.

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<td nowrap>

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1+	1+	1+	3.5+	12+	3+

Підтримка: мобільні переглядачі

Переглядач
	1+	1+	1+	1+

Приклади

+ запропонувати свій приклад у пісочниці

<p>1. без nowrap — таблиця вміщається</p>
<div class="box">
  <table>
    <tr>
      <td>Умови повернення товару протягом чотирнадцяти днів</td>
      <td class="date">12.05.2026</td>
    </tr>
  </table>
</div>

<p>2. nowrap на першій комірці — таблиця ширша за контейнер</p>
<div class="box">
  <table>
    <tr>
      <td nowrap>Умови повернення товару протягом чотирнадцяти днів</td>
      <td class="date">12.05.2026</td>
    </tr>
  </table>
</div>

p {
  font: 14px sans-serif;
  margin: 14px 0 4px;
  color: #444;
}

.box {
  width: 280px;
  overflow-x: auto;
  border: 2px dashed #c0392b;
}

table { border-collapse: collapse; }

td {
  border: 1px solid #888;
  padding: 6px;
}

.date { white-space: nowrap; }

<p>Приклад використання атрибуту "nowrap"</p>
<table>
<tr>
  <td nowrap>Використання цього атрибута засуджується специфікацією HTML </td>
  <td>HTML</td>
  <td>HTML</td>
  <td>HTML</td>
</tr> 
</table>

table,td{
  border: 1px solid grey;
  text-align:center;
} 

td{
   padding:10px;
}