生我才必有用。——李白
大家在平時在復制表格的時候,不知道有沒有遇到過這樣的問題?
好好的按Ctrl+C復制,Ctrl+C粘貼,發(fā)現(xiàn)復制后的表格行高和列寬都變了,
就像下面這樣:
當我們再把把word表格的內(nèi)容粘貼到Excel中,發(fā)現(xiàn)也是全亂了。
如果我們在對表格進行行高列寬調(diào)整,那就太麻煩了。今天就給大家分享2個小技巧,教你怎么復制表格,表格才不會變形。
我們先看Excel到Excel復制技巧
1、選擇整行復制,再進行粘貼,表格行高就不會變
2、選擇所有行,按復制,再在新的位置點擊-【選擇性粘貼】,點擊保留源列寬,列寬即不會變。
說完Excel復制粘貼的行高列寬不變,我們再看下Excel和Word結合使用怎么確保不會改變。
答:把Excel表格直接按Ctrl 拖到word中,行高列寬都不變。
答:先把word文件另存為html格式(網(wǎng)頁)格式
再用excel打開,原來的Word表格行高列寬都不變。
以上就是給大家分享關于Excel與Excel及Excel與Word之間如何實現(xiàn)復制粘貼后不變形的方法,希望對你有幫助。
如果覺得文章對你有幫助的話,希望大家?guī)兔c贊加分享哦~,謝謝
本文由李先生的職場Excel原創(chuàng),歡迎關注,帶你一起長知識!
時候會需要做一個可以拉伸寬度的表格,但是現(xiàn)有的表格是沒有這個功能的,那就需要我們手動的實現(xiàn),下面我來看看,如何用原生js實現(xiàn)。
先看效果圖,都是在表格頭部進行的拉伸:
單元格被拉伸的時候,整體表格寬度不變
單元格被拉伸的時候,整體表格會變寬。
話不多說,直接上代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格拉伸</title>
<style>
#tab{
text-align:center
}
</style>
</head>
<body>
<table id="tab" border="1" cellpadding="2" cellspacing="0" width="500px" >
<tr style="background-color: #dcdcdc">
<td style="width:100px;">序號</td>
<td>姓名</td>
<td>語文分數(shù)</td>
<td>數(shù)學分數(shù)</td>
</tr>
<tr>
<td>1</td>
<td>李萌</td>
<td>80</td>
<td>98</td>
</tr>
<tr>
<td>2</td>
<td>趙新</td>
<td>98</td>
<td>88</td>
</tr>
<tr>
<td>3</td>
<td>張小紅</td>
<td>82</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>陳成</td>
<td>98</td>
<td>94</td>
</tr>
<tr>
<td>5</td>
<td>胡山</td>
<td>77</td>
<td>94</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
let tTD;
let table=document.getElementById("tab");
for (let i=0; i < table.rows [0].cells.length; i++) {
table.rows[0].cells[i].onmousedown=function () {
//記錄單元格
tTD=this;
if (event.offsetX > tTD.offsetWidth - 10) {
tTD.mouseDown=true;
tTD.oldX=event.x;
tTD.oldWidth=tTD.offsetWidth;
};
//記錄Table寬度(單元格拉伸,表格整體寬度變化時用的)
//table=tTD;
// while (table.tagName !='TABLE') {table=table.parentElement};
//tTD.tableWidth=table.offsetWidth;
};
table.rows[0].cells[i].onmouseup=function () {
//結束寬度調(diào)整
if (tTD==undefined) {
tTD=this
};
tTD.mouseDown=false;
tTD.style.cursor='default';
};
table.rows[0].cells[i].onmousemove=function () {
//更改鼠標樣式
if (event.offsetX > this.offsetWidth - 10){
this.style.cursor='col-resize';
}else{
this.style.cursor='default';
};
//取出暫存的Table Cell
if (tTD==undefined) {tTD=this};
//調(diào)整寬度
if (tTD.mouseDown !=null && tTD.mouseDown==true) {
tTD.style.cursor='default';
if (tTD.oldWidth + (event.x - tTD.oldX) > 0){
tTD.width=tTD.oldWidth + (event.x - tTD.oldX);
//調(diào)整列寬
tTD.style.width=tTD.width;
tTD.style.cursor='col-resize';
//調(diào)整該列中的每個Cell
table=tTD;
}
while (table.tagName !='TABLE') {table=table.parentElement};
for (let j=0; j < table.rows.length ; j++) {
table.rows[j].cells[tTD.cellIndex].width=tTD.width;
}
//調(diào)整整個表
// table.width=tTD.tableWidth + (tTD.offsetWidth-tTD.oldWidth);
// table.style.width=table.width;
}
};
}
</script>
現(xiàn)有的代碼可以復制到本地運行,直接得到圖一的效果;把文中注釋的部分的代碼釋放,就是得到圖二。有興趣的可以自行研究哦!
evExpress官方技術團隊預計在11月發(fā)布HTML/Markdown 編輯器 (v21.2) 的下一個主要版本,此次更新將包括以下的新特性/功能:
DevExtreme Complete Subscription官方最新版免費下載試用,歷史版本下載,在線文檔和幫助文件下載-慧都網(wǎng)
支持表格調(diào)整大小
v21.2允許開發(fā)人員調(diào)整在HTML/Markdown編輯器中顯示的表格大小,要啟用此新功能,請將tableResizing.enabled屬性設置為 true。您還可以使用tableResizing.minColumnWidth和tableResizing.minRowHeight屬性限制最小列寬和行高:
Angular
<dx-html-editor>
<dxo-table-resizing
[enabled]="true"
[minColumnWidth]="70"
[minRowHeight]="30">
</dxo-table-resizing>
</dx-html-editor>
Vue
<DxHtmlEditor>
<DxTableResizing
:enabled="true"
:min-column-width="70"
:min-row-height="30"
/>
</DxHtmlEditor>
React
<HtmlEditor>
<TableResizing
enabled={true}
minColumnWidth={70}
minRowHeight={30}
/>
</HtmlEditor>
jQuery
$(function() {
$("#html-editor").dxHtmlEditor({
tableResizing: {
enabled: true,
minColumnWidth: 70,
minRowHeight: 30
}
});
});
表格單元格中的多行文本
在v21.2中,HTML/Markdown 編輯器增加了對表格單元格內(nèi)多行文本的支持,要添加新行,用戶只需按 Enter 鍵即可。
表格上下文菜單
表格單元格現(xiàn)在包括一個帶有常用表格操作命令的上下文菜單,以前這些命令是使用工具欄控件執(zhí)行的,此上下文菜單的引入允許您為其他控件/命令釋放工具欄空間。
要激活上下文菜單,請將tableContextMenu.enabled屬性設置為 true。 您還可以使用 tableContextMenu.items 數(shù)組重新排列或隱藏菜單命令:
Angular
<dx-html-editor>
<dxo-table-context-menu
[enabled]="true">
<dxi-item name="tableProperties"></dxi-item>
<dxi-item name="cellProperties"></dxi-item>
</dxo-table-context-menu>
</dx-html-editor>
Vue
<DxHtmlEditor>
<DxTableContextMenu
:enabled="true">
<DxItem name="tableProperties" />
<DxItem name="cellProperties" />
</DxTableContextMenu>
</DxHtmlEditor>
React
<HtmlEditor>
<TableContextMenu
enabled={true}>
<Item name="tableProperties" />
<Item name="cellProperties" />
</TableContextMenu>
</HtmlEditor>
jQuery
$(function() {
$("#html-editor").dxHtmlEditor({
tableContextMenu: {
enabled: true,
items: [ "tableProperties", "cellProperties" ]
}
});
});
支持表格標題
新版本改進了表格標記處理算法,現(xiàn)在支持表格標題 (<thead>)。
要添加標題行,最終用戶可以單擊Insert Header Row工具欄按鈕,使用以下代碼將按鈕添加到工具欄:
Angular
<dx-html-editor>
<dxo-toolbar>
<dxi-item name="insertHeaderRow"></dxi-item>
</dxo-toolbar>
</dx-html-editor>
Vue
<DxHtmlEditor>
<DxToolbar>
<DxItem name="insertHeaderRow" />
</DxToolbar>
</DxHtmlEditor>
React
<HtmlEditor>
<Toolbar>
<Item name="insertHeaderRow" />
</Toolbar>
</HtmlEditor>
jQuery
$(function() {
$("#html-editor").dxHtmlEditor({
toolbar: {
items: [
// ...
"insertHeaderRow"
]
}
});
});
或者,用戶可以從新引入的表格上下文菜單中選擇插入標題行命令。
表格/單元格外觀定制
新的彈出對話框允許用戶根據(jù)要求修改表格和單元格屬性。
可以更改下表屬性:
單元格支持以下屬性:
HTML/Markdown 編輯器將相應的屬性和樣式保存在輸出標記中,并且可以在輸入標記中指定它們時對其進行解析。
添加了在塊元素(列表、表格、引號)中插入換行符的功能,要開始新行,用戶必須使用 Shift + Enter 組合鍵,將 true 分配給 allowSoftLineBreak 屬性以啟用此功能:
Angular
<dx-html-editor
[allowSoftLineBreak]="true">
</dx-html-editor>
Vue
<DxHtmlEditor
:allow-soft-line-break="true">
</DxHtmlEditor>
React
<HtmlEditor
allowSoftLineBreak={true}>
</HtmlEditor>
jQuery
$(function() {
$("#html-editor").dxHtmlEditor({
allowSoftLineBreak: true
});
});
DevExtreme
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現(xiàn)代Web開發(fā)堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構建交互式的Web應用程序。從Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和響應式UI小部件集合,可在傳統(tǒng)Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。