如何调整 table 的大小,以便在 mousedrag 上显示隐藏的内容?
How to resize table so that hidden contents are shown on mousedrag?
当我们使用调整大小 属性 时,table 在鼠标拖动上放大。但是,我希望 table 上的更多行显示在 mousedrag 上,并且 table 不改变大小。
好的考虑这个
https://jsfiddle.net/o0Ldf0us/4/
当你滚动时,你会看到隐藏的内容吗?我希望能够不是通过滚动来查看它们,而是通过鼠标拖动那个小的调整大小选项。
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;
}
尝试将此添加到 div css
resize: both;
当我们使用调整大小 属性 时,table 在鼠标拖动上放大。但是,我希望 table 上的更多行显示在 mousedrag 上,并且 table 不改变大小。 好的考虑这个 https://jsfiddle.net/o0Ldf0us/4/
当你滚动时,你会看到隐藏的内容吗?我希望能够不是通过滚动来查看它们,而是通过鼠标拖动那个小的调整大小选项。
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;
}
尝试将此添加到 div css
resize: both;