Атрибут nowrap тега <th> — заборона переносу рядків
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<th nowrap>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ | 12+ | 3+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1+ | 1+ | 1+ | 1+ |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута nowrap теґа <th>
HTML
<p>Приклад використання атрибуту "nowrap"</p>
<table>
<tr>
<th id="myTH" nowrap="nowrap">(Приклад з використанням атрибута) Атрибут "nowrap" - являється логічним атрибутом. </th>
<th>(Приклад без використання атрибута) Атрибут "nowrap" - являється логічним атрибутом.</th>
</tr>
</table>
<br>
<div id="sales"><input type="submit" value="Змінити значення nowrap" onclick="ToggleWrap()" /></div>CSS
table,th{
border: 1px solid grey;
text-align:center;
}
th{
padding:10px;
}JS
function ToggleWrap() {
var tableData = document.getElementById("myTH");
tableData.noWrap = false;
sales.innerHTML = '<input type="submit" value="Заблокувати поле" onclick="Toggle()" /> Текст відображається з переносами! ';
}
function Toggle() {
var tableData = document.getElementById("myTH");
tableData.noWrap = true;
sales.innerHTML = '<input type="submit" value="Розблокувати" onclick="ToggleWrap()()" />Текст відображається без переносів!';
}
//# sourceURL=pen.jsНайпростіший приклад використання HTML атрибута nowrap теґа <th>
HTML
<p>Приклад використання атрибуту "nowrap"</p>
<table>
<tr>
<th nowrap>(Приклад з використанням атрибута) Додавання атрибута <code>nowrap</code> до елементу "td" змушує текст всередині комірки відображатися без переносів. </th>
<th>(Приклад без використання атрибута) Атрибут "nowrap" - являється логічним атрибутом.</th>
</tr>
</table>CSS
table,th{
border: 1px solid grey;
text-align:center;
}
th{
padding:10px;
}Дві однакові таблиці в однакових контейнерах завширшки 260 пікселів. У першій заголовки мають nowrap — таблиця розсунулася ширше за контейнер, і знизу з'явилася смуга прокрутки. У другій атрибута немає — заголовки перенеслися, таблиця вклалася. Третя показує точніший спосіб: переноситься все, крім однієї пари слів, зʼєднаної нерозривним пробілом.
HTML
<p class="head">1. Із nowrap — таблиця не влазить, з'явилася прокрутка вбік</p>
<div class="wrap">
<table>
<tr><th nowrap>Дата укладення договору</th><th nowrap>Сума до сплати</th></tr>
<tr><td>03.08.2026</td><td>12 400,00</td></tr>
</table>
</div>
<p class="head">2. Без nowrap — заголовки перенеслися, таблиця вклалася</p>
<div class="wrap">
<table>
<tr><th>Дата укладення договору</th><th>Сума до сплати</th></tr>
<tr><td>03.08.2026</td><td>12 400,00</td></tr>
</table>
</div>
<p class="head">3. Нерозривний пробіл: не рветься лише «до сплати»</p>
<div class="wrap">
<table>
<tr><th>Дата укладення договору</th><th>Сума до сплати</th></tr>
<tr><td>03.08.2026</td><td>12 400,00</td></tr>
</table>
</div>
<p class="head">4. nowrap на span — не діє взагалі</p>
<div class="wrap">
<span nowrap>Цей довгий рядок поза таблицею переноситься, попри атрибут nowrap</span>
</div>CSS
.head {
margin: 18px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.wrap {
width: 260px;
padding: 4px;
border: 2px solid #2f6fd0;
border-radius: 4px;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
padding: 5px 8px;
border: 1px solid #b9c6d8;
font-size: .95em;
}
th {
background: #eef3fb;
}
.wrap:has(th[nowrap]) {
border-color: #d64545;
background: #fff8f8;
}Різниця між HTML 4.01 та HTML5
Атрибут nowrap для тега <th> не підтримується у HTML5. Користуйтесь для цього CSS.
Різниця між XHTML та HTML
У XHTML мінімізований запис атрибутів заборонено,тому атрибут nowrap повинен бути визначений як <th nowrap=«nowrap»>.
Коментарі
Коментарів ще немає — будьте першим!