Question

我正在尝试为y设置隐藏tbody，为x设置auto但没有成功，我在这里尝试了一些技巧，

但没有一个工作，我想以这种方式滚动，你会留在原处。

HTML

if($delete){
    $checkboxIds = implode(',',$_POST['checkbox']);

    $sql = "DELETE FROM admin WHERE id IN ('".$checkboxIds."')";
    $result = mysql_query($sql);

    // if successful redirect to delete_multiple.php 
    if($result){
        echo "<meta http-equiv=\"refresh\" content=\"0;URL=delete_admin.php\">";
    }
}

CSS

<div id="fruitcratebody" style="height: 300px; width: 500px; background:red;">
    <div id="fruitcrateContainer">
        <table id="fruitcrateTable" class="tablesorter" style="display: table;">
            <thead>
                <tr>
                    <th class="header">Column1</th>
                    <th class="header">Column2</th>
                    <th class="header">Column3</th>
                    <th class="header">Column4</th>
                    <th class="header">Column5</th>
                    <th class="header">Column6</th>
                    <th class="header">Column7</th>
                </tr>
            </thead>
            <tbody id="fruitcrateTBody">
                <tr>
                    <td>0</td>
                    <td>Calculate1</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

我想要这样的东西，但现在我无法排列列宽，

enter image description here

Answer 1

没有简单的方法可以做到这一点，因为表格被格式化以显示所有内容，这意味着调整表格单元格的宽度和高度以显示内容，这也意味着表格的高度和宽度将会调整因此。任何指定的宽度和高度都倾向于被视为最小值。

要获得所需的效果，您需要使用两个表，如下所示。

将标题放在一个表中，将数据放在第二个表中。两个表都具有相同的宽度，您需要确保所有表格单元具有相同的宽度并使用table-display: fixed。

围绕第二个表（对于数据），在启用滚动的情况下包装块级div。

注意：至少有一个jQuery插件可以处理粘性表标题，例如，请参阅http://www.fixedheadertable.com

此外，如果没有额外的编程，table-sort将无法在这种双表布局中工作。

有一个jQuery插件似乎同时包含排序和粘贴标题：

http://mottie.github.io/tablesorter/docs/index.html

但你需要尝试一下。

.fruitcrateTable {
    border: 1px dotted blue;
    width: 520px;
}
.fruitcrateTable table {
    width: 500px;
    table-layout: fixed;
}
.fruitcrateTable table th, .fruitcrateTable table td {
    width: 15%;
    border: 1px dotted gray;
}
.fruitcrateTable .table-body-scroll {
    height: 300px;
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

<div class="fruitcrateTable">
<table class="header-table">
    <thead>
        <tr>
            <th class="header">Column1</th>
            <th class="header">Column2</th>
            <th class="header">Column3</th>
            <th class="header">Column4</th>
            <th class="header">Column5</th>
            <th class="header">Column6</th>
            <th class="header">Column7</th>
        </tr>
    </thead>
</table>
<div class="table-body-scroll">
        <table>
            <tbody>
                <tr>
                    <td>0</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 2

你可以在其父

上加上overflow属性

#fruitcrateContainer {
    height: 100px;
    overflow-y: scroll;
    background:red;
}

试试这个：http://jsfiddle.net/wxdgf4pr/12/

Answer 3

对包含表格的over-flow应用fixed height和div

请参考 JS FIDDLE

Answer 4

最后使用这个CSS，

var bookingPicker = new Pikaday(
            {
                field: $(self.options.calendarInput, container)[0],
                container: $(self.options.calendarContainer, container)[0],
                minDate: new Date(),
                bound: false,
                firstDay: 1,
            onOpen: function () {
                this.disableDayFn(23); //<--- ???
            },
            onSelect: function (date) {

            },
            onDraw: function (date) {
                console.log("NEW MONTH")
            }
        }
    );

http://jsfiddle.net/wxdgf4pr/8/

Answer 5

<强> CSS

tbody{
    position:relative;
    overflow:hidden;
    height:300px;
}

thead > tr, tbody{
    display:block;
}

DEMO

tbody溢出隐藏不起作用

5 个答案: