Блог

Главная - Вопросы по программированию - Я хочу, чтобы все строки таблицы были одинаковой высоты, а столбцы прокручивались (при необходимости)

Я хочу, чтобы все строки таблицы были одинаковой высоты, а столбцы прокручивались (при необходимости)

#html #css #arrays #overflow

#HTML #css #массивы #переполнение

Вопрос:

Я написал код, который должен сделать все строки одинаковой высоты, и если в столбце больше информации, чем умещается, должна появиться полоса прокрутки. Однако на данный момент некоторые строки становятся больше, и полосы прокрутки не появляются.

 var table = '<table>';
                for (let i = 0; i < 6; i  ) {
                    var item = jsonData[i];
                    table  = '<tr>';
                    table  = '<td align="left" class="align-middle" height="65px">'
                         item.firstName '</td>';
                    table  = '<td class="align-middle" height="65px" overflow-y="auto">'
                         item.agegroup '</td>';
                    table  = '<td class="align-middle" height="65px" overflow-y="auto">'
                         item.subject '</td>';
                    table  = '<td class="align-middle" height="65px" overflow-y="auto">'
                         item.location '</td>';
                    table  = '</tr>';
                }
                table  = '</table>';
                document.getElementById("fulltable").innerHTML = table;

Комментарии:

1. Попробуйте либо height =»65″, либо style =»height:65px». Или еще более простым является определение высоты в классе и применение этого класса к вашим тд

Ответ №1:

Вы можете добавить div внутри <td> и добавить height и overflow: auto; для этого div

 table{
  table-layout: fixed;
  width: 100%;
}
table tr td .scroll{
  height:65px;
  overflow:auto;
}  
 <table>
  <tr>
    <td align="left" class="align-middle"><div class="scroll">Lorem Ipsum</div></td>
    <td class="align-middle"><div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div></td>
    <td class="align-middle"><div class="scroll">Lorem Ipsum</div></td>
    <td class="align-middle"><div class="scroll">Lorem Ipsum</div></td>
  </tr>
    <tr>
    <td align="left" class="align-middle"><div class="scroll">Lorem Ipsum</div></td>
    <td class="align-middle"><div class="scroll">Industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500 Lorem Ipsum is simply dummy text of the printing and typesetting</div></td>
    <td class="align-middle"><div class="scroll">Lorem Ipsum</div></td>
    <td class="align-middle"><div class="scroll">Lorem Ipsum</div></td>
  </tr>
</table>

Комментарии:

1. Могу ли я также написать так: <div height=»65px» overflow-y=»auto»> , или это все еще остается в части <td> ?

2. Поместите стиль в файл css и измените свой код следующим образом table = '<td align="left" class="align-middle" height="65px"><div class="scroll">' item.firstName '</div></td>';