html - 如何使动态表格单元格使用溢出 :hidden

Question

我想在动态表上使用 overflow:hidden，该表的宽度应仅按需要设置:

<table>
  <tr>
    <td>Should_not_overflow</td>
  </tr>
  <tr>
    <td style="overflow: hidden;">This text should overflow please</td>
  </tr>
</table>

我知道它适用于固定表格布局，但我需要一个动态表格。

我也知道它适用于固定宽度和嵌套的 <div> ，但同样，我需要一个动态表格布局。

Answer 1

.table-wrapper {
    font-size:12px;
    position: relative;
    width: 50%;
    height: 275px;
    border: 1px solid #333;
    padding: 50px 0 0;
    margin: 10px auto;
}
.header-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 50px;
    background-color: #03A9F4;
}
.table-container {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
table {
    width: 100%;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
}
tr {
    &:nth-child(even) {
        background-color: #F2F2F2;
    }
  
    th {
        text-align: left;
        padding: 0 5px;
      
        .th-extra {
            width: 100%;

            .th-extra__inner {
                position: absolute;
                top: 0;
                color: #000;
                line-height: 50px;
                text-align: left;
                border-left: 1px solid #333;
                padding: 0 0 0 5px;
                margin: 0 0 0 -5px;
            }
        }
      
        &:first-child {
            .th-extra__inner {
                border: none;
            }
        }
    }
}
td {
    line-height: 42px;
    text-align: left;
    padding: 0 5px;
  
    & + td {
        border-left: 1px solid #333;
    }
}

<div class="table-wrapper">
    <div class="header-bg"></div>
    <div class="table-container">
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>
                        <div class="th-extra">
                            <div class="th-extra__inner">First</div>  
                        </div>
                    </th>
                    <th>
                        <div class="th-extra">
                            <div class="th-extra__inner">Second</div>  
                        </div>
                    </th>
                    <th>
                        <div class="th-extra">
                            <div class="th-extra__inner">Third</div>  
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column with longer content</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>