如何调整表大小以便隐藏内容显示在mousedrag上?

时间:2015-06-24 10:22:27

标签: jquery html-table

当我们使用resize属性时,表格会放大mousedrag。但是我希望桌面上的更多行显示在mousedrag上,表格不会改变大小。 好的,考虑一下 https://jsfiddle.net/o0Ldf0us/4/

滚动时,隐藏的内容是否合适?我希望能够不通过滚动查看它们,而是通过mousedrag查看这个小调整大小选项。

HTML:

<div>
<table id="example">
<thead>
    <tr>
        <th>Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
        <th>Heading4</th>
        <th>Heading5</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Data1.1</td>
        <td>Data2.1</td>
        <td>Data3.1</td>
        <td>Data4.1</td>
        <td>Data5.1</td>
    </tr>
     <tr>
        <td>Data1.2</td>
        <td>Data2.2</td>
        <td>Data3.2</td>
        <td>Data4.2</td>
        <td>Data5.2</td>
    </tr>
     <tr>
        <td>Data1.3</td>
        <td>Data2.3</td>
        <td>Data3.3</td>
        <td>Data4.3</td>
        <td>Data5.3</td>
    </tr>
</tbody>

CSS:

#example, th, td{
border:1px solid black;
border-collapse:collapse;
}
div{
height:100px;
width:200px;  
overflow:scroll;
}

1 个答案:

答案 0 :(得分:2)

尝试将此添加到div css

resize: both;

<强> FIDDLE DEMO