Как ограничить высоту строки таблицы

0

Я создал TABLE, упомянутый ниже:

<html>    
<body>
    <table border="0" cellspacing="0" cellpadding="1" width="100%">
        <colgroup>
            <col span="1" style="width:5%">
                <col span="1" style="width:70%">
                    <col span="1" style="width:25%">
        </colgroup>
        <tr>
            <td colspan="2">
                <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text 1</div>
            </td>
            <td rowspan="5">
                <section class="loginform">
                    <fieldset style="border-radius: 5px; padding: 5px;">
                        <legend>Template</legend>
                        <ul style="padding: 10px;">
                            <li>one</li>
                            <li>Two</li>
                            <li>Three</li>
                            <li>Four</li>
                            <li>Five</li>
                        </ul>
                    </fieldset>
                </section>
            </td>
        </tr>
        <tr>
            <td>val</td>
            <td>
                <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; color:black; border:1px solid #e5e5e5; min-height: 80px;">1 Only</div>
            </td>
        </tr>
        <tr>
            <td>bal</td>
            <td>
                <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">2 only</div>
            </td>
        </tr>
        <tr>
            <td>nal</td>
            <td>
                <div style="width:100%; color:black; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Both 1 and 2</div>
            </td>
        </tr>
        <tr>
            <td>dul</td>
            <td>
                <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Neither 1 nor 2</div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>    
</html>

В этой таблице; Я хочу обеспечить высоту шаблона (раздел справа); всегда равна высоте пяти строк таблицы. Если данные внутри шаблона больше, он должен иметь строку прокрутки. Но ни в коем случае он не должен выходить за пределы пяти рядов таблицы. Можете ли вы предложить?

  • 2
    использовать max-height в CSS
  • 0
    Я попробовал это для TD с rowspan = 5; но почему-то это не работает.
Теги:
html-table

4 ответа

2
Лучший ответ

Вам нужно будет установить фиксированную высоту.

Проверьте это:

http://jsfiddle.net/8tFnG/

<fieldset style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red;">
Поделиться
  • 0
    Спасибо Ануп; Как добавить полосу прокрутки; если в разделе шаблонов есть еще элементы?
  • 0
    добавить переполнение: автоматически для fieldset. Обновленная скрипка: - jsfiddle.net/8tFnG/1
Показать ещё 2 комментария
1

Если вы знаете высоту пяти строк слева, вы можете "ограничить" высоту поля "Шаблон" с помощью простого правила css: max-height: 400px; overflow: hidden; overflow-y: scroll; max-height: 400px; overflow: hidden; overflow-y: scroll; где 400px - высота пяти строк таблицы; переполнение скрыто, и переполнение по оси y задается для прокрутки. Попробуйте:

.loginform fieldset{
    height: 400px;
    max-height: 400px; 
    overflow: hidden;
    overflow-y: scroll;
}

Другой вариант - использовать JavaScript. Вы можете узнать высоту таблицы, содержащей пять строк, а затем настроить высоту поля "Шаблон" на загрузке страницы.

Надеюсь это поможет.

Поделиться
  • 0
    Благодарю вас; работает отлично; Я попробовал это после того, как Ануп так принял его ответ. Спасибо за ваше понимание заранее.
0

добавить позицию: зафиксировано на элементе

Поделиться
0

Попробуйте этот css:

<style>
    fieldset{ height: 450px;overflow-y:hidden;}
</style>
Поделиться
  • 0
    Я попробовал это; но почему-то ; это не дает желаемых результатов.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню