Problems pasting styled HTML tables into Microsoft Word
Take this CSS / HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
/* Column widths */
.columnTime {
width: 7%;
}
.columnTheme1Class {
width: 66%;
}
.columnTheme2Classes {
width: 54%;
}
.columnTheme3Classes {
width: 42%;
}
.columnPosition {
width: 10%;
}
.columnName {
width: 17%;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
table tbody tr:hover td {
color: #000;
background: #efefef;
}
body {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #666;
}
.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
.containerMeeting {
margin-bottom: 3mm;
}
.cellBibleReading {
padding-left: 3mm;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
border-right-style: none;
}
.cellNotes {
font-size: 10pt;
font-style: italic;
}
.cellTime {
padding-left: 3mm;
padding-right: 5mm;
font-size: 9pt;
font-weight: 700;
color: gray;
}
.cellTheme {
border-right-style: none;
}
.cellPosition {
color: gray;
padding-right: 2mm;
text-align: right;
font-size: 8pt;
font-weight: 700;
vertical-align: middle;
text-transform: none;
border-left-style: none;
}
.cellName {
font-size: 10pt;
font-weight: normal;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
.borderHEADINGOuter {
border-bottom: 1px gray solid;
margin-bottom: 2mm;
}
.borderHEADINGInner {
border-bottom: 4px gray solid;
margin-bottom: 2px;
}
.tableHEADING {
table-layout: auto;
width: 100%;
border: none;
}
.tableHEADING td {
border: none;
}
.textSpecialEvent {
text-align: center;
}
.textSpecialEventLocation {
text-align: center;
}
.tableDATE {
margin-bottom: 2mm;
}
.tableTFGW {
margin-bottom: 2mm;
}
.cellTFGW {
padding-left: 1mm;
}
.textTFGW {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
color: #fff;
background-color: #606a70;
width: 90mm;
font-size: 10pt;
font-weight: 700;
}
.bulletTFGW {
/*padding-top: 1mm;
padding-bottom: 1mm;*/
padding-right: 1mm;
color: #606a70; /*font-size: 14pt;*/;
font-weight: normal;
}
.tableAYFM {
margin-bottom: 2mm;
}
.cellAYFM {
padding-left: 1mm;
}
.textAYFM {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
color: #fff;
background-color: #c18626;
width: 90mm;
font-size: 10pt;
font-weight: 700;
}
.bulletAYFM {
/*padding-top: 1mm;
padding-bottom: 1mm;*/
padding-right: 1mm;
color: #c18626; /*font-size: 14pt;*/;
font-weight: normal;
}
.textDuplicate {
background-color: #ff0000;
color: #ffffff;
}
.textMaterial {
/* Uncomment to hide the material */
/* display:none;*/
font-size: 10pt;
font-style: italic;
font-weight: 700;
}
.textMethod {
/* Uncomment to hide the method */
/* display:none;*/
font-size: 10pt;
font-style: italic;
font-weight: 700;
}
.textStudyNumberReference {
}
.textSongTitle {
/* Uncomment to hide the song title */
/* display:none;*/
font-size: 10pt;
font-weight: 700;
}
.cellClass {
font-size: 8pt;
font-weight: 700;
vertical-align: bottom;
color: gray;
}
.tableLAC {
margin-bottom: 2mm;
}
.cellLAC {
padding-left: 1mm;
}
.textLAC {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
color: #fff;
background-color: #961526;
width: 90mm;
font-size: 10pt;
font-weight: 700;
}
.bulletLAC {
/*padding-top: 1mm;
padding-bottom: 1mm;*/
padding-right: 1mm;
color: #961526; /*font-size: 14pt;*/;
font-weight: normal;
}
.textDuration {
padding-left: 1mm;
font-family: Calibri;
font-size: 9pt;
font-weight: normal;
}
.textTheme {
font-size: 10pt;
font-weight: normal;
}
.textSongLabel {
font-size: 10pt;
font-weight: normal;
}
.textSongNumber {
font-size: 10pt;
font-weight: normal;
}
.textCongregation {
vertical-align: bottom;
text-align: left;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
}
.textTitle {
vertical-align: bottom;
text-align: right;
font-family: Cambria;
font-size: 18pt;
font-weight: 700;
}
.tableWeekend {
margin-bottom: 2mm;
}
.cellWEEKEND {
padding-left: 1mm;
}
.textWEEKEND {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
color: #fff;
background-color: #8b8378;
width: 90mm;
font-size: 10pt;
font-weight: 700;
text-transform: uppercase;
}
.cellWEEKENDText {
padding-left: 3mm;
}
.textPTSLabel {
font-weight: 700;
font-size: 10pt;
}
.textPTSValue {
font-size: 10pt;
}
/* For right-to-left: text directions swapped */
[dir=rtl] .textCongregation {
text-align: right;
}
[dir=rtl] .textTitle {
text-align: left;
}
[dir=rtl] .cellPosition {
text-align: left;
padding-left: 2mm;
padding-right: 1mm;
}
[dir=rtl] .floatRight {
float: none;
text-align: left;
padding-left: 2mm;
padding-right: 1mm;
}
@media print {
body {
background: #FFF;
}
.containerPage, .containerMeeting, .tableDATE, .tableHEADING, .tableTFGW, .tableAYFM, .tableLAC, .tableWeekend {
width: 99%;
min-width: 99%;
max-width: 99%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
}
</style>
<title>Keynsham Midweek Meeting Schedule</title>
</head>
<body>
<div class="containerPage">
<div class="containerMeeting">
<div class="borderHEADINGOuter">
<div class="borderHEADINGInner">
<table class="tableHEADING">
<tr>
<td class="textCongregation">Keynsham</td>
<td class="textTitle">Midweek Meeting Schedule</td>
</tr>
</table>
</div>
</div>
<a name="week0" />
<table cellpadding="0" cellspacing="0" class="tableDATE">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnPosition" /><col class="columnName" />
</colgroup>
<tr>
<td class="cellBibleReading" colspan="3">
<div class="floatRight">
Chairman:</div>
May 4-10 | GENESIS 36-37</td>
<td class="cellName">1</td>
</tr>
<tr>
<td colspan="3">
<div class="floatRight">
Host:<br />
Co-host:</div>
</td>
<td class="cellName">2a<br />
2b</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td class="cellTime">19:20</td>
<td class="cellTheme"><span class="bulletTFGW">•</span>
<span class="textSongLabel">Song</span>
<span class="textSongNumber">114</span>
<span class="textSongTitle">“Exercise Patience”</span> </td>
<td class="cellPosition">Prayer:</td>
<td class="cellName">3</td>
</tr>
<tr>
<td class="cellTime">19:21</td>
<td class="cellTheme" colspan="2"><span class="bulletTFGW">•</span>
<span class="textTheme">Opening Comments</span>
<span class="textDuration">(1 min.) </span></td>
<td class="cellName">Chairman</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="tableTFGW">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnPosition" /><col class="columnName" />
</colgroup>
<tr>
<td class="cellTFGW" colspan="3">
<div class="textTFGW">
TREASURES FROM GOD'S WORD</div>
</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">19:31</td>
<td colspan="2"><span class="bulletTFGW">•</span>
<span class="textTheme">“Joseph Becomes a Victim of Jealousy”</span>
<span class="textDuration">(10 min.) </span>
<span class="textMethod">Talk</span> </td>
<td class="cellName">4</td>
</tr>
<tr>
<td class="cellTime">19:41</td>
<td colspan="2"><span class="bulletTFGW">•</span>
<span class="textTheme">Digging for Spiritual Gems</span>
<span class="textDuration">(10 min.) </span>
<span class="textMethod">Questions and Answers</span> </td>
<td class="cellName">5</td>
</tr>
<tr>
<td class="cellTime">19:46</td>
<td class="cellTheme"><span class="bulletTFGW">•</span>
<span class="textTheme">Bible Reading</span>
<span class="textDuration">(4 min. or less) </span>
<span class="textMaterial">Ge 36:1-19<span class="textStudyNumberReference">
(th study 5)</span> </span></td>
<td class="cellPosition">Student:</td>
<td class="cellName">6</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="tableAYFM">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnPosition" /><col class="columnName" />
</colgroup>
<tr>
<td class="cellAYFM" colspan="3">
<div class="textAYFM">
APPLY YOURSELF TO THE FIELD MINISTRY</div>
</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">19:57</td>
<td class="cellTheme" colspan="2"><span class="bulletAYFM">•</span>
<span class="textTheme"></span><span class="textTheme">Apply Yourself
to Reading and Teaching</span> <span class="textDuration">(10 min.)
</span><span class="textMaterial">Understandable to Others<span class="textStudyNumberReference">
(th study 17)</span> </span></td>
<td class="cellName">Chairman</td>
</tr>
<tr>
<td class="cellTime">20:02</td>
<td class="cellTheme"><span class="bulletAYFM">•</span>
<span class="textTheme">Talk</span> <span class="textDuration">(5
min. or less) </span><span class="textMaterial">w02 10/15 30-31—Theme:
Why Should Christians Have Godly Jealousy?<span class="textStudyNumberReference">
(th study 6)</span> </span></td>
<td class="cellPosition">Student:</td>
<td class="cellName">7</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="tableLAC">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnPosition" /><col class="columnName" />
</colgroup>
<tr>
<td class="cellLAC" colspan="4">
<div class="textLAC">
LIVING AS CHRISTIANS</div>
</td>
</tr>
<tr>
<td class="cellTime">20:07</td>
<td class="" colspan="3"><span class="bulletLAC">•</span>
<span class="textSongLabel">Song</span>
<span class="textSongNumber">126</span>
<span class="textSongTitle">Stay Awake, Stand Firm, Grow Mighty</span>
</td>
</tr>
<tr>
<td class="cellTime">20:22</td>
<td class="cellTheme" colspan="2"><span class="bulletLAC">•</span>
<span class="textTheme">“Are You Prepared?”</span>
<span class="textDuration">(15 min.) </span>
<span class="textMethod">Discussion with Video</span> </td>
<td class="cellName">8</td>
</tr>
<tr>
<td class="cellTime">20:52</td>
<td class="cellTheme"><span class="bulletLAC">•</span>
<span class="textTheme">Congregation Bible Study</span>
<span class="textDuration">(30 min.) </span>
<span class="textMaterial">jy chap. 113</span> </td>
<td class="cellPosition">Conductor:<br />
Reader:</td>
<td class="cellName">9<br />
10</td>
</tr>
<tr>
<td class="cellTime">20:55</td>
<td class="cellTheme" colspan="2"><span class="bulletLAC">•</span>
<span class="textTheme">Concluding Comments</span>
<span class="textDuration">(3 min. or less) </span></td>
<td class="cellName">Chairman</td>
</tr>
<tr>
<td class="cellTime">21:00</td>
<td class="cellTheme"><span class="bulletLAC">•</span>
<span class="textSongLabel">Song</span>
<span class="textSongNumber">84</span>
<span class="textSongTitle">Reaching Out</span> </td>
<td class="cellPosition">Prayer:</td>
<td class="cellName">11</td>
</tr>
</table>
</div>
</div>
</body>
</html>
This is what it looks like in a browser:
Here is the fiddle. As far as I am aware there is nothing wrong with this HTML / CSS structurally.
Yet, if I select the content and paste it into Microsoft Word 2016:
The columns are not consistent. Why is this?
Update
I also noticed the Time column on the left is inconsistent.
In each of my table objects I was using a colgroup:
<table class="tableTFGW" cellspacing="0" cellpadding="0">
<colgroup>
<col class="columnTime" />
<col class="columnTheme1Class" />
<col class="columnPosition" />
<col class="columnName" />
</colgroup>
What I thought I was try was duplicate the width properties from the above classes into each of my cell classes, like this:
.cellTime {
padding-left: 3mm;
padding-right: 5mm;
font-size: 9pt;
font-weight: 700;
color: gray;
width:7%;
}
.cellTheme {
border-right-style: none;
}
.cellPosition {
color: gray;
padding-right: 2mm;
text-align: right;
font-size: 8pt;
font-weight: 700;
vertical-align: middle;
text-transform: none;
border-left-style: none;
width:10%;
}
.cellName {
font-size: 10pt;
font-weight: normal;
width:17%;
}
This is improved:
- The right hand column is all good.
- Most of the left hand column is good (just not the very top)
So it seems that Word does not obey the colgroup object when establishing the styling of the table cells.
Solution
Word's formatting is based on XML, not HTML or CSS. Pasted tables are translated to Word format and Word's default setting "Automatically resize to fit contents" is applied.
For a more consistent appearance in Word and HTML, create the tables in Word and export as HTML. The HTML will be bloated with additional Word formatting code, but the appearance will be much more similar in Word and in a browser.
- Clear clipboard to prohibit unauthorised copying, insert message?
- Can you render a html file into a container?
- how to position two elements left and right
- Debounce in ReactJS
- Angular - Why isn't my dropdown list working
- Is [h6 aria-level="7"] a reliable way to create a [h7] element?
- There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit
- How can I prevent address bar from hiding in mobile browsers?
- How do you limit the number of options selected in an HTML <select> element?
- Is there an option on the IFrame element to load it before the dom page loaded event?
- Changing Font Color in HTML Email for AOL Mail
- TypeError: 'Locator' object is not callable using .first() in Playwright
- is form enctype "application/json" available?
- QTextBrowser not processing CSS properly
- Cannot remove bootstrap button border
- Unable to center navbar properly
- Popover on input field
- How to hide an element and all its children from screen readers?
- Force a line break in a URL
- Select text in ::before or ::after pseudo-element
- Trying to size div as percentages of the entire page
- Remove all style attributes from HTML in PHP
- Tooltips for mobile browsers
- How to open Windows Explorer via link
- Method 'POST' is not supported - Spring
- Monitor an images folder to get a live local html/javascript gallery
- Is call to preventDefault() really necessary on drop event?
- Use rvest to scrape all p after h? (or other R package)
- How to position two elements side by side using CSS
- Data not getting into the database