Question

我使用了以下代码段。

显示数据：

<div style="height: 100px;">
    <div style=" height: 100px;overflow: scroll;">
        <table >
            <tbody>
                <tr><td>1</td></tr>      
                <tr><td>2</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>  
            </tbody>
        </table>
        <div class="line" style="left:10px; width: 1px;  position: absolute;height: 30px; background: red;top: 0px;" >
        </div>
        </div>
</div>

这里我给出了30px高度是通过硬编码来绘制线条。我想绘制全表的行，但在运行时我无法获得表高度。如何绘制全表格的行。

我尝试使用auto代替30px，但它并不适用于我。如何解决这个问题。

Answer 1

它只是尝试使用表格边框..例如访问http://www.w3schools.com/css/css_table.asp

Answer 2

如果您要绘制表格边框，请使用以下CSS：

table, th, td {
    border: 1px solid black;
    border-collapse:collapse;
}

Working Demo

Answer 3

我可以使用您的方法为您提供解决方案！

<div style="height: 100px;">
    <div style=" height: 100px;overflow: scroll;">
    <div class="line" style="left 10px; width: 1px; float:left; position: relative;height: 30%; background: red;top: 0px;" ></div>
            <table style="float:left; position:relative; left: 10px;" >
            <tbody>
                <tr><td>1</td></tr>      
                <tr><td>2</td></tr>  
                 ....

只需使用左浮动和百分比大小根据容器大小正确定位和调整div的大小！
这是一个演示，因为其他人都做了一个http://jsfiddle.net/VLbVw/

Answer 4

你可以把表格的第一行作为一行，把你的东西放在桌子上。将表的宽度设为100％

<div style="height: 100px;">
        <div style=" height: 100px;overflow: scroll; border-left:1px solid red;">
        <!-- put your stuff here-->
        <div>Hi there !!!</div>
            <table style="width:100%">
                <tbody>
                     <tr>
                       <td>
                         <!-- this div represent the line-->
                         <div class="line" style="height:1px;background: green;top: 0px;" >                                    
                      </td>
                    </tr>   
                    <tr><td>1</td></tr>      
                    <tr><td>1</td></tr>      
                    <tr><td>1</td></tr> 
                </tbody>
            </table>
            </div>
            </div>
    </div>

Answer 5

一些小改动就可以了：

CSS：

.line {
    position: absolute;
    top: 0px;
    left: 10px;
    height: 100%;
    width: 1px;
    background: red;
}

HTML：

<div style="height: 100px; overflow: scroll;">
    <div style="position: relative">
        <table >
            <tbody>
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>      
                <tr><td>1</td></tr>  
                <tr><td>1</td></tr>  
            </tbody>
        </table>
        <div class="line"></div>
    </div>
</div>

请注意，当您使用position: absolute时，您还需要定位父元素。相对定位的div在这里是“图层”，它将自动适应其内容的高度。

A live demo at jsFiddle

使用div html绘制线条

5 个答案: