Word中插入两个表格,表格后出现大片空白,另外一个表格不能连接到一个表格后边

Word中插入两个表格,表格后出现大片空白,另外一个表格不能连接到一个表格后边
原因分析:表格插入的格式需要调整
方法:
1.表格内右键,选择表格属性
在这里插入图片描述
2. 表格-文字环绕-无
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现表头固定表体自动循环无缝滚动的表格,可以使用以下步骤: 1. HTML 结构 首先,我们需要先搭建表格的 HTML 结构。代码如下: ```html <div class="table-wrap"> <table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> <th>表头5</th> </tr> </thead> <tbody> <tr> <td>数据1-1</td> <td>数据1-2</td> <td>数据1-3</td> <td>数据1-4</td> <td>数据1-5</td> </tr> <tr> <td>数据2-1</td> <td>数据2-2</td> <td>数据2-3</td> <td>数据2-4</td> <td>数据2-5</td> </tr> <!-- 其他数据行 --> </tbody> </table> </div> ``` 2. CSS 样式 接下来,我们需要设置表格的 CSS 样式,包括表格的宽度、高度、边框等属性,以及表头的固定和表体的滚动效果。代码如下: ```css .table-wrap { width: 100%; height: 300px; overflow: hidden; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: center; } thead { position: sticky; top: 0; background-color: #fff; } tbody { animation: scroll 20s linear infinite; } @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } ``` 其,`.table-wrap` 是表格容器的类名,设置了容器的宽度、高度和溢出隐藏;`table` 是表格的标签选择器,设置了表格的宽度和边框合并;`th` 和 `td` 分别是表头和数据行的样式,设置了单元格的边框、内边距和居对齐;`thead` 是表头的选择器,设置了表头的固定和背景颜色;`tbody` 是表体的选择器,设置了表体的滚动效果和动画时。 3. JavaScript 交互 最后,我们需要使用 JavaScript 实现鼠标悬浮停止滚动和滚动出去的数据自动插入的效果。代码如下: ```javascript const tableWrap = document.querySelector('.table-wrap') let timer = null tableWrap.addEventListener('mouseover', () => { clearInterval(timer) }) tableWrap.addEventListener('mouseout', () => { timer = setInterval(() => { const firstRow = tableWrap.querySelector('tbody tr:first-child') const cloneRow = firstRow.cloneNode(true) tableWrap.querySelector('tbody').appendChild(cloneRow) firstRow.remove() }, 2000) }) timer = setInterval(() => { const firstRow = tableWrap.querySelector('tbody tr:first-child') const cloneRow = firstRow.cloneNode(true) tableWrap.querySelector('tbody').appendChild(cloneRow) firstRow.remove() }, 2000) ``` 其,`tableWrap` 是表格容器的 DOM 元素,使用 `querySelector` 方法获取;`timer` 是定时器变量;`mouseover` 和 `mouseout` 是鼠标悬浮和移出容器的事件,分别清除和启动定时器;定时器的代码实现了滚动出去的数据自动插入后边的效果,具体实现方法是先使用 `querySelector` 获取表格数据的第一行元素 `firstRow`,然后使用 `cloneNode` 方法克隆这一行元素,再使用 `appendChild` 方法将克隆的行元素添加到表格数据的最后一行,最后使用 `remove` 方法删除原来的第一行元素。 综上所述,HTML、CSS 和 JavaScript 的代码实现如下: ```html <div class="table-wrap"> <table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> <th>表头5</th> </tr> </thead> <tbody> <tr> <td>数据1-1</td> <td>数据1-2</td> <td>数据1-3</td> <td>数据1-4</td> <td>数据1-5</td> </tr> <tr> <td>数据2-1</td> <td>数据2-2</td> <td>数据2-3</td> <td>数据2-4</td> <td>数据2-5</td> </tr> <!-- 其他数据行 --> </tbody> </table> </div> <style> .table-wrap { width: 100%; height: 300px; overflow: hidden; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: center; } thead { position: sticky; top: 0; background-color: #fff; } tbody { animation: scroll 20s linear infinite; } @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } </style> <script> const tableWrap = document.querySelector('.table-wrap') let timer = null tableWrap.addEventListener('mouseover', () => { clearInterval(timer) }) tableWrap.addEventListener('mouseout', () => { timer = setInterval(() => { const firstRow = tableWrap.querySelector('tbody tr:first-child') const cloneRow = firstRow.cloneNode(true) tableWrap.querySelector('tbody').appendChild(cloneRow) firstRow.remove() }, 2000) }) timer = setInterval(() => { const firstRow = tableWrap.querySelector('tbody tr:first-child') const cloneRow = firstRow.cloneNode(true) tableWrap.querySelector('tbody').appendChild(cloneRow) firstRow.remove() }, 2000) </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值