时间戳

首页 > 解决方案 > 我希望所有表格行的高度相同，并且列可以滚动（如果需要）

html - 我希望所有表格行的高度相同，并且列可以滚动（如果需要）

问题描述

我编写了一个代码，应该使所有行的高度相同，如果列中的信息多于适合的信息，则应该出现一个滚动条。目前，虽然有些行变得更大，但没有出现滚动条。

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;

标签： htmlcssarraysoverflow

解决方案

You can add a div inside <td> and add height and overflow: auto; on that 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>

推荐阅读