水平滚动时 HTML 表格 <td> 内容与另一个静态 <td> 内容重载答案

【问题标题】：HTML table <td> content overloading with another static <td> content while horizontal scrolling水平滚动时 HTML 表格 <td> 内容与另一个静态 <td> 内容重载
【发布时间】：2020-04-09 15:39:27
【问题描述】：

根据我的项目需要，我通过使用 position 和 left css 属性将表格的前三列内容和标题设为静态，并使其余列可水平滚动，例如下面

但是当非静态列中有更多内容时，非静态列内容会显示在静态列内容之上，如下面

如果任何非静态列的内容比其他非静态列的内容更多，请注意另一件事（可能是因为前三列具有 position:absolute 但不确定）从开始点如下，但它们应该只根据我的需要从顶部对齐

源码：

<!DOCTYPE html>
<html>

<head>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            width:900px;
        }

     
          /*This sets alternating colours on each odd numbered column:*/
          table tr:nth-child(odd) td
        {
            background-color: #fff;
        }

        /*This sets alternating colours on each even numbered column:*/
        table tr:nth-child(even) td
        {
            background-color: #eee;
        }

        /*  tr:nth-child(add) {
            background-color: #eee;
        } */
        tr th,
        td {
            padding: 5px;
            width:100pt;
            height: auto;
        }

        tr th{
            text-align: left;
            background-color: black;
            color: white;
        }

        div{
            width:700px;
            overflow-x: scroll;
        }
    </style>
</head>

<body>
  
    <div>
        <table>
            <tr>
                <th style="position:absolute;left:0pt;">Heading1</th>
                <th style="position:absolute;left:80pt;">Heading2</th>
                <th style="position:absolute;left:140pt;">Heading3</th>
                <th>Heading4</th>
                <th>Heading5</th>
                <th>Heading6</th>
                <th>Heading7</th>
            <tr>
            <tr>
                <td style="position:absolute;left:0pt;">Content1 Content1 Content1 Content1</td>
                <td style="position:absolute;left:80pt;">Content2</td>
                <td style="position:absolute;left:140pt;">Content3</td>
                <td>Content4</td>
                <td>Content5 Content5 Content5 Content5 Content5</td>
                <td>Content6</td>
                <td>Content7</td>
            </tr>
            <tr>
                <td style="position:absolute;left:0pt;">Content1</td>
                <td style="position:absolute;left:80pt;">Content2</td>
                <td style="position:absolute;left:140pt;">Content3</td>
                <td>Content4</td>
                <td>Content5</td>
                <td>Content6</td>
                <td>Content7</td>
            </tr>
            <tr>
                <td style="position:absolute;left:0pt;">Content1</td>
                <td style="position:absolute;left:80pt;">Content2</td>
                <td style="position:absolute;left:140pt;">Content3</td>
                <td>Content4</td>
                <td>Content5</td>
                <td>Content6</td>
                <td>Content7</td>
            </tr>
            <tr>
                <td style="position:absolute;left:0pt;">Content1</td>
                <td style="position:absolute;left:80pt;">Content2</td>
                <td style="position:absolute;left:140pt;">Content3</td>
                <td>Content4</td>
                <td>Content5</td>
                <td>Content6</td>
                <td>Content7</td>
            </tr>
        </table>
    </div>
</body>

</html>

我可以尝试什么？提前谢谢你。

【问题讨论】：

标签： javascript html css

【解决方案1】：

关于垂直位置，这是解决方案：

td {vertical-align:top;}

是否可以强制单元格的高度？如果是这样，height:50px 解决了第一个问题。

【讨论】：

谢谢@AlainPre，td {vertical-align:top;} 对于垂直顶部位置看起来不错，而我们无法预测的第二个位置总是出现一些固定数量的字符或内容行将来自服务:(，是否有可能应用高度为自动 (height:auto)？我也尝试了您的第二个解决方案，但是当有更多内容时，再次看到相同的内容问题:(
可能是min-height:50px;这个属性设置了一个最小高度，但是如果有必要让这个高度增加。
已尝试使用 min-height 但没有运气:(。谢谢您的建议。