Question

我在make <tbody>可滚动时面临问题。我制作了<tbody>可滚动<thead>的{{1}}＆amp; <th>的{{1}}未对齐。

你能帮助我吗

我的<tbody>：

<td>

HTML：

<table cellspacing="0" cellpadding="0" border="0" class="sortingtable scroll">
    <thead>
        <tr>
            <th>Name <i></i>
            </th>
            <th>Web Address <i></i>
            </th>
            <th>Office Location <i></i>
            </th>
            <th>Configuration <i></i>
            </th>
            <th>Status <i></i>
            </th>
            <th>Queue <i></i>
            </th>
            <th><span class="actions">Action</span> 
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tester A</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>5 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
        <tr>
            <td>Tester B</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>9 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
        <tr>
            <td>Tester C</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>2 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
        <tr>
            <td>Tester D</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>4 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
        <tr>
            <td>Tester E</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>7 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
        <tr>
            <td>Tester F</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>5 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
        <tr>
            <td>Tester G</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>11 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
        <tr>
            <td>Tester H</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>6 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
        <tr>
            <td>Tester I</td>
            <td>bat-1.sj</td>
            <td> California</td>
            <td>Normal config.</td>
            <td>Online</td>
            <td>3 Jobs</td>
            <td> <a href="#/connect" class="btn_connect">Connect</a>

            </td>
        </tr>
    </tbody>
</table>

这是我的JSFiddle

Answer 1

您似乎想要fix <thead>并<tbody>滚动。

为此我会推荐floatThead，即我也用它来做同样的事。

在这里，我创建了一个JSFiddle，请看一下。

你的<tbody>元素行为不端的主要原因是你已宣布：

table.scroll tbody, table.scroll thead {
    display: block;
}

<thead是一个表格单元格，按照CSS display:table-cell和class Subs(models.Model): tag = models.CharField(max_length=100) class Users(models.Model): name = models.CharField(max_length=100) tags = models.ManyToManyField(Subs) 你已经通过改变它的默认属性改变了它的行为。

灵活的表与tbody滚动问题

1 个答案: