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

Я создал СТОЛ нижеперечисленным:Как ограничить высоту строки таблицы

<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>

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

источник

2013-12-16 Pawan Mude

использование __'max-height'__ в __css__ –

Я попытался это для TD с RowSpan = 5; но почему-то это не работает. –

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

Заканчивать этот один: -

http://jsfiddle.net/8tFnG/

<fieldset style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red;">

источник

2013-12-16 11:55:07 Anup

Спасибо Anup; Как добавить полосу прокрутки; если в разделе шаблона больше элементов? –

add overflow: auto to fieldset. Обновленная скрипка: - http://jsfiddle.net/8tFnG/1/ – Anup

Спасибо Anup; работает. –

Попробуйте CSS:

<style> 
    fieldset{ height: 450px;overflow-y:hidden;} 
</style>

источник

2013-12-16 11:48:48

Я пробовал это; но как-то ; это не дает желаемых результатов. –

Если вы знаете высоту пяти рядов слева, вы можете «ограничить» высоту вашей FIELDSET «Template» с простым правилом CSS: max-height: 400px; overflow: hidden; overflow-y: scroll; где 400px - высота пяти строк таблицы; переполнение скрыто, и переполнение по оси y задается для прокрутки. Попробуйте:

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

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

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

источник

2013-12-16 11:50:55 rand0m

Спасибо; он работает отлично; Я попробовал это после того, как Ануп принял его ответ. Спасибо за ваше понимание заранее. –

добавить положение: прикреплено к элементу

источник

2013-12-16 11:55:04 nareeboy

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

ответ

Смежные вопросы