102

Чи можна зафіксувати висоту рядка (tr) на столі?

Проблема з’являється, коли я стискаю вікно браузера, деякі рядки починають грати навколо, і я не можу виправити висоту рядка.

Я спробував декілька способів: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

Я використовую IE7

Стиль

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

HTML-код.

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>

html html-table row

— Амра
джерело

97

Таблиці є iffy (принаймні, в IE), коли справа стосується фіксації висот, а не обгортання тексту. Я думаю, ви виявите, що єдиним рішенням є введення тексту всередині divелемента, наприклад:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}

<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>

Розгорніть фрагмент

Таким чином, divвисота "висота" клітини, що містить, і текст не може рости div, зберігаючи комірок / рядок однакової висоти незалежно від розміру вікна.

— Енді Е
джерело

1

Дякую за пораду. Здається, це працює, але це виглядає трохи безладно.

— Амра

Раді допомогти :-) На жаль, брудний код, як правило, трапляється у хаках та обхідних шляхах.

— Енді Е

Я використовую [code] .container {ширина: 100%; максимальна висота: 40 пікселів; переповнення: приховано; } [/ code] та [code] <div class = 'container'> </div> [/ code].

— Cees Timmerman

Я зробив той самий метод, поставивши div у тег <th>, і він добре працював. У мене ця проблема була лише в Chrome. FFox, Safari та IE добре підтримували висоту, встановлену в заголовку таблиці. Дякую, що поділились! :)

— Mário Rodrigues

не працює в сафарі ... вам потрібно встановити фактичну висоту і ширину також на діві, не тільки td

— Radu Simionescu

15

Спробуйте ввести висоту в одну з комірок, наприклад:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

Зауважте, що ви не зможете зробити клітинку менше, ніж вимагає вміст. У такому випадку вам слід спершу зменшити текст.

— ткнути
джерело

1

Я впевнений, що ви не використовуєте "px" в атрибутах html.

— розкльовується

10

Я впевнений, що ви можете використовувати атрибут стилю.

— Бурак Добур

11

Встановлення `td`висоти менше природної висоти її вмісту

Оскільки комірки таблиці хочуть бути принаймні великими, щоб охопити їх вміст, якщо вміст не має видимої висоти, комірки можуть бути довільно змінені.

Змінюючи розмір комірок, ми можемо контролювати висоту рядка.

Один із способів зробити це - встановити вміст із absoluteположенням всередині relativeкомірки, а також встановити heightрозмір комірки, вміст leftта topвміст.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}

<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>

Розгорніть фрагмент

table-layoutнерухомість

Друга таблиця у наведеному вище фрагменті table-layout: fixedзастосована, що призводить до того, що клітинкам надається однакова ширина, незалежно від їх вмісту, у материнській родині.

За інформацією caniuse.com , жодних суттєвих проблем щодо сумісності щодо використання table-layoutстаном на 12 вересня 2019 року не існує.

Або просто застосувати widthдо конкретних комірок, як у третій таблиці.

Ці методи дозволяють клітині, що містить фактично нерозмірний вміст, створений шляхом застосування, position: absoluteщоб надати деякий довільний обхват.

Набагато простіше ...

Я справді повинен був подумати про це з самого початку; ми можемо маніпулювати вмістом комірок таблиці рівня блоку всіма звичними способами, і не знищуючи повністю природний розмір вмісту position: absolute, ми можемо залишити таблицю, щоб зрозуміти, якою має бути ширина.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}

<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>

Розгорніть фрагмент

— Фред Гандт
джерело

Нарешті відповідь, яка виглядає багатообіцяючо! Треба спробувати, як тільки я буду на роботі, я дам відгуки, якщо не забуду.

— jeromej

1

Працював як шарм! (Попереджаючи, що він видаляє text-align: centerта інші фокуси щодо центрування, хоча… як це покладається position: absolute)

— jeromej

У моєму випадку це працює на висоту, але при використанні postion: absoluteя втрачаю автоматичну ширину комірок. Намагаючись знайти спосіб, щоб таблиця все-таки правильно розраховувала ширину комірок, приймаючи контроль над висотою рядка. Будь-які думки?

— попіл

@ash - Я не одразу думаю про будь-який спосіб зберегти повністю автоматичну ширину після ефективного знищення розміру вмісту, але ми можемо змусити комірки таблиці бути довільно широкими. Я розширив фрагмент прикладу, щоб показати один метод, який може вам допомогти. Я ще більше

— подумаю

Дякую Фреду. Зауважте, що я міг би мати заголовки (<th>), щоб надати стовпцям фіксований розмір, але тоді я переживаю, що заголовки можуть бути занадто вузькими або занадто широкими.

— попіл

8

Якщо помістити діва в td, це змусило мене працювати.

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>

— користувач2987600
джерело

2

Ваша ширина столу становить 90%, що відносно контейнера.

Якщо ви стискаєте сторінку, ви, ймовірно, також стискаєте ширину таблиці. Ширина комірок також зменшується, і браузер компенсує збільшенням висоти.

Щоб висота була недоторканою, ви повинні переконатися, що ширина комірок може містити намічений вміст. Виправити ширину таблиці, мабуть, ви хочете спробувати. Або, можливо, пограйте з мінімальною шириною столу.

— гаразд
джерело

1

Мені довелося це зробити, щоб отримати результат, якого я хотів:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

Він відмовився працювати тільки з осередком або дівом і потребував обох.

— Джен
джерело

-5

Це тому, що слова завершуються і йдуть новими лініями, отже, розтягуючи TR. Це має вирішити вашу проблему:

overflow:hidden;

Поставте це у стилях TR Хоча це має працювати, чому б просто не дати йому розтягнутись o0

PS. Я не тестував його, тому не ненавиджу XD

— Озі
джерело

3

Не ненавидить, але є список стилів, підтримуваних елементом TD в IE за адресою msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx . overflowне одна з них.

— Енді Е

Як зафіксувати висоту TR?

Встановлення tdвисоти менше природної висоти її вмісту

Набагато простіше ...

Встановлення `td`висоти менше природної висоти її вмісту