如何将滚动条添加到响应式html页面

时间:2014-12-13 10:09:00

标签: html scroll html-table overflow

如何向表格添加滚动条? 我已经阅读了关于将表添加到div并使用overflow:scroll将div添加到CSS的线程但是当我向下滚动表头时消失... 此外,我希望我的页面响应(我正在使用引导程序),表行来自mysql数据库。使用CSS position:fixed也搞砸了我的桌面..

还有其他方法吗?

我的jsp:

<table class="inflow-table ">
                <thead>
                    <tr>
                        <th>
                            <div class="button black th-div th-div-first">ID</div>
                        </th>
                        <th>
                            <div class="button black th-div">Όνομα</div>
                        </th>
                        <th>
                            <div class="button black th-div">Προιόν</div>
                        </th>
                        <th>
                            <div class="button black th-div">Κατάσταση</div>
                        </th>
                        <th>
                            <div class="button black th-div">Ύψος<div>
                        </th>
                        <th>
                            <div class="button black th-div" >Gross</div>
                        </th>
                        <th>
                            <div class="button black th-div">Net</div>
                        </th>
                        <th>
                            <div class="button black th-div">Θερμ. °C</div>
                        </th>
                        <th>
                            <div class="button black th-div">Στάθμη Προιόντος</div>
                        </th>
                        <th>
                            <div class="button black th-div">Στάθμη Νερού</div>
                        </th>
                        <th>
                            <div class="button black th-div">Ειδ. Βάρος</div>
                        </th>
                        <th>
                            <div class="button black th-div">Μέγιστη Ροή</div>
                        </th>
                        <th>
                            <div></div>
                        </th>
                    </tr>
                </thead>
                <tbody >
                    <c:forEach items="${TankState}" var="state">
                        <tr>
                            <td>
                                <div class="td-div td-div-first">${state.getTank().getTankID()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getTank().getTankName()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getTank().getProduct().getProductName()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getStatusDescription()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getTank().getTankHeight()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getGross()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getNet()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getTemperature()}</div>
                            </td>
                            <td>
                                <div class="td-div">
                                    <div class="col-sm-4 my-bar">${state.getProductLevel()}m</div>
                                    <div class="progress my-bar ">
                                        <%  
                                            out.write("<div class='progress-bar progress-bar-danger' style='width:");
                                        %>${state.getProductLevelPercentance()}<%  out.write("%'></div>" ); %>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="td-div">${state.getWaterLevel()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getProductDensity()}</div>
                            </td>
                            <td>
                                <div class="td-div">${state.getTank().getMaxFlow()}</div>
                            </td>
                            <td>
                                <div class="td-div td-div-last" onclick="setValue(${state.getTank().getTankID()});"> >> </div>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>                

0 个答案:

没有答案