Вопрос по html, html-table, row – Как зафиксировать высоту ТР?

87

Можно ли зафиксировать высоту строки (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>

Ваш Ответ

7   ответов
7

Помещение div в тд заставило его работать на меня.

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

в 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сохраняя ячейку / строку одинаковой высоты независимо от размера окна.

Я сделал тот же метод, поместив div внутри тега <th>, и он работал хорошо. У меня была эта проблема только на Chrome. FFox, Safari и IE хорошо поддерживали высоту, заданную в заголовке таблицы. Спасибо, что поделился! :) Mário Rodrigues
Я использую [code] .container {width: 100%; максимальная высота: 40 пикселей; переполнение: скрытый; } [/ code] и [code] <div class = 'container'> </ div> [/ code]. Cees Timmerman
Спасибо за совет, кажется, работает, но выглядит немного грязно, хотя. Amra
Рад помочь :-) К сожалению, грязный код, как правило, имеет место в хакерских и обходных путях. Andy E
не работает в сафари ... вам нужно установить фактическую высоту и ширину на div, а не только тд Radu Simionescu
2

Если вы сжимаете страницу, вы, вероятно, также сжимаете ширину таблицы. Ширина ячеек тоже уменьшается, а браузер компенсирует это увеличением высоты.

Чтобы не изменять высоту, вы должны убедиться, что ширина ячеек может вместить предполагаемый контент. Исправление ширины таблицы, вероятно, это то, что вы хотите попробовать. Или, возможно, поиграйтесь с минимальной шириной стола.

Спасибо за комментарий, я попробовал это и не работало. Amra
-4

что слова обертывают и идут по новым линиям, следовательно, растягивая TR. Это должно исправить вашу проблему:

overflow:hidden;

Поместите это в стили TR Хотя это должно работать, почему бы просто не растянуть его

PS. я не проверял это, так что не ненавидь XD

Спасибо за комментарий, я попробовал это и не работало :-(. Amra
Не ненавижу, но есть список стилей, поддерживаемых элементом TD в IE по адресуmsdn.microsoft.com/en-us/library/ms535911(VS.85).aspx. overflow не один из них. Andy E
8
Настройкаtd высота меньше чемнатуральный высота его содержания

чтобы заключать их содержимое, если содержимое не имеет видимой высоты, размеры ячеек могут быть произвольно изменены.

Изменяя размеры ячеек, мы можем контролировать высоту строки.

Один из способов сделать это - установить содержимое с помощьюabsolute положение в пределахrelative клетка, и установитеheight клетки, иleft а такжеtop содержания.

table {
    width: 100%;
}
.set-height td {
    position: relative;
    overflow: hidden;
    height: 2em;
}
.set-height p {
    position: absolute;
    margin: .1em;
    left: 0;
    top: 0;
}
<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></tr>
    <tr><td>Foo</td></tr>
    <tr><td>Bar</td></tr>
    <tr><td>Baz</td></tr>
    <tr><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>

Наконец ответ, который выглядит многообещающим! Должен попробовать, как только я буду на работе, я дам отзыв, если я не забуду. JeromeJ
Работал как шарм! (Предупреждение о том, что он удаляетtext-align: center и другие фокусирующие трюки, хотя ... как это полагается наposition: absolute) JeromeJ
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>

Он отказывался работать только с ячейкой или div и нуждался в обоих.

12

Попробуйте поместить высоту в одну из ячеек, например так:

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

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

Спасибо за комментарий, я попробовал это и не работает. Amra
Я уверен, что вы можете использовать в атрибуте стиля. Burak Dobur
Я уверен, что вы не используете «px» в атрибутах HTML. unflores

Похожие вопросы