Проблемы со вставкой таблиц в стиле HTML в Microsoft Word - PullRequest
Новая
       32

Проблемы со вставкой таблиц в стиле HTML в Microsoft Word

0 голосов
/ 03 мая 2020

Возьмите CSS / HTML код: 

<!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">&nbsp;</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>

Вот как это выглядит в браузере:

Browser

Вот скрипка . Насколько мне известно, в этом HTML / CSS структурно нет ничего плохого.

Тем не менее, если я выберу содержимое и вставлю его в Microsoft Word 2016:

Word

Столбцы не согласованы. Почему это так?

Обновление

Я также заметил, что столбец Time слева не согласован.

В каждом из моих table объектов, которые я использовал, colgroup : 

<table class="tableTFGW" cellspacing="0" cellpadding="0">
  <colgroup>
    <col class="columnTime" />
    <col class="columnTheme1Class" />
    <col class="columnPosition" />
    <col class="columnName" />
  </colgroup>

Я подумал, что попробовал дублировать свойства width из вышеперечисленных классов в каждый из классов моих ячеек, например: 

.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%;
}

Это улучшено:

Word 2

  • Правая колонка все в порядке.
  • Большая часть левой колонки хороша (только не самый верхний)

Таким образом, кажется, что Word не подчиняется объекту colgroup при определении стиля ячеек таблицы.

1 Ответ

2 голосов
/ 03 мая 2020

Форматирование Word основано на XML, а не HTML или CSS. Вставленные таблицы переводятся в формат Word, и применяется стандартная настройка Word «Автоматическое изменение размера для соответствия содержимому».

Для более согласованного отображения в Word и HTML создайте таблицы в Word и экспортируйте их как HTML , HTML будет раздуваться с дополнительным кодом форматирования Word, но внешний вид будет намного более похожим в Word и в браузере.

...