格式化嵌套表的问题

时间:2014-08-11 16:16:44

标签: html browser html-table

我们正在开发一个网站,帮助我们从提供的示例中生成简历,以便生成这些简历,显示生成的简历并将其导出为.doc格式我们已经使用表格创建了简历的结构它们在作为word文档打开时呈现完美,但在任何浏览器中打开时都会呈现错误。我猜测嵌套表的数量更多,因此就是这个问题。

以下是小提琴的链接:http://jsfiddle.net/EdgeHour/dmm8hfhr/

我会在这里粘贴代码,仅供您参考。请帮忙。

<table cellspacing="10px" cellpadding="3px" style="width:18cm;">
    <tr>
        <td width="65%" style="font-size:28px; color:#F00; font-weight:bolder;"> John Diioe </td>
        <td>&nbsp; </td>
    </tr>
    <tr>
        <td style="font-size:16px; font-weight:bolder;"> Senior CAD Technician </td>
        <td>&nbsp; </td>
    </tr>
    <tr>
        <td> 
        <table>
            <tr>
                <td align="center" style="background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF;"> Summary </td>
            </tr>
            <tr>
                <td> Information Systems Technologist with a strong background in business process and technology providing an ideal mix of management, analytical, and technical capabilities. Experience in small, mid, and fortune 500 companies as well as several industries inclusive of Healthcare, Manufacturing, Technology, Consumer Goods, Pharmaceuticals and Infrastructure/Construction. Strong people skills with a proven record as a problem solver recognized for focus on cost reduction, meeting aggressive deadlines, aligning teams and maintaining a hand’s on approach to achieve an organization’s business goals. Highly skilled in all facets of </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF;"> Accomplishment </td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:disc;">
                    <li>Actively participated in the senior management team which determines plans for the development of the company</li>
                    <li>Worked on spread sheet to effect pay rises and conditions in Nigeria.</li>
                    <li>Participated in the set up of $8m business in Angola which increased to $25m Business.</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF;"> Professional Experience </td>
            </tr>
            <tr>
                <td> 
                <table width="100%">
                    <tr>
                        <td style="font-size:14px; font-weight:bolder; color:#F00;"> JC Services, LLC, Nesconset, NY </td>
                        <td align="right" style="font-size:14px; font-weight:bolder; color:#F00;"> March 2007 -Present </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="font-size:14px; font-weight:bolder; color:#F00;"> Principal Consultant </td>
                    </tr>
                    <tr>
                        <td colspan="2"> Job Responsibilities </td>
                    </tr>
                    <tr>
                        <td colspan="2"> 
                        <ul style="list-style:disc; font-weight:lighter;font-size:13px;">
                            <li>Healthcare – Infrastructure project management and subject matter expertise. Lead the planning and redesign of the organizations computer infrastructure inclusive of data center design and layout.</li>
                            <li>Healthcare – Internet / E-Mail migration project. Recommended, designed and implemented new Internet and E-Mail services for organization</li>
                        </ul>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size:14px; font-weight:bolder; color:#F00;"> JC Services, LLC, Nesconset, NY </td>
                        <td align="right" style="font-size:14px; font-weight:bolder; color:#F00;"> March 2007 -Present </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="font-size:14px; font-weight:bolder; color:#F00;"> Principal Consultant </td>
                    </tr>
                    <tr>
                        <td colspan="2"> Job Responsibilities </td>
                    </tr>
                    <tr>
                        <td colspan="2"> 
                        <ul style="list-style:disc; font-weight:lighter;font-size:13px;">
                            <li>Healthcare – Infrastructure project management and subject matter expertise. Lead the planning and redesign of the organizations computer infrastructure inclusive of data center design and layout.</li>
                            <li>Healthcare – Internet / E-Mail migration project. Recommended, designed and implemented new Internet and E-Mail services for organization</li>
                        </ul>
                        </td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF;"> Project </td>
            </tr>
            <tr>
                <table width="100%">
                    <tr>
                        <td width="30%"> Project</td>
                        <td>Retail, supply chain, warehouse ERP management systems; e-Commerce system; CRM/Loyalty system </td>
                    </tr>
                    <tr>
                        <td>Role </td>
                        <td>&nbsp; </td>
                    </tr>
                    <tr>
                        <td colspan="2"> 
                        <ul>
                            <li>Implementation and operations of Aldata GOLD Retail software and multi systems integration to POS, warehouse systems, finance systems, and data warehouse. Includes IT planning, project management, business models, business rules, and supply chain integration. Designer of advanced consignment management. Solution architect of e-Commerce and CRM/Loyalty projects.</li>
                            <li>Group entities: The Body Shop Indonesia, Centro department stores, KemChicks supermarket, PS/M2 fashion, F Fashion, Luley hotels, Santika Bintaro hotel.</li>
                        </ul>
                        </td>
                    </tr>
                </table>
            </tr>
        </table>
        </td>
        <td valign="top"> 
        <table>
            <tr>
                <td align="center" style="background-color:#06F; font-size:12px; font-weight:bold; color:#FFFFFF;"> Core Competencies </td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#06F; height:20px; font-size:12px; font-weight:bold; color:#FFFFFF;"> Technical Skills </td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#06F; height:20px; font-size:12px; font-weight:bold; color:#FFFFFF;"> Education</td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#06F; height:20px; font-size:12px; font-weight:bold; color:#FFFFFF;"> Contact Details</td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#06F; height:20px; font-size:12px; font-weight:bold; color:#FFFFFF;"> Personal Details</td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
        </table>
        </td>
    </tr>
</table>

2 个答案:

答案 0 :(得分:0)

您的标记无效,您的标记已打开但未在某些位置关闭,并且您至少有一个嵌套表不在<td>内(第125行)。

答案 1 :(得分:0)

我建议你放弃表并完全重写代码。以下是我将如何开始该文档:

<h1>
    John Diioe 
</h1>
<h2>
    Senior CAD Technician 
</h2>
<h3>
    Summary 
</h3>
<p>
    Information Systems Technologist with a strong background in business process and technology providing an ideal mix of management, analytical, and technical capabilities. Experience in small, mid, and fortune 500 companies as well as several industries inclusive of Healthcare, Manufacturing, Technology, Consumer Goods, Pharmaceuticals and Infrastructure/Construction. Strong people skills with a proven record as a problem solver recognized for focus on cost reduction, meeting aggressive deadlines, aligning teams and maintaining a hand’s on approach to achieve an organization’s business goals. Highly skilled in all facets of 
</p>
<h3>
    Accomplishments 
</h3>
<ul class="disc">
    <li>Actively participated in the senior management team which determines plans for the development of the company</li>
    <li>Worked on spread sheet to effect pay rises and conditions in Nigeria.</li>
    <li>Participated in the set up of $8m business in Angola which increased to $25m Business.</li>
    <li>Knowledge in HSE standards</li>
</ul>
<h3>
    Professional Experience
</h3>
<h4>
    JC Services, LLC, Nesconset, NY
</h4>
<p>
    March 2007 - Present<br>
    Principal Consultant
</p>
<h5>
    Job Responsibilities
</h5>
<ul class="details">
    <li>Healthcare – Infrastructure project management and subject matter expertise. Lead the planning and redesign of the organizations computer infrastructure inclusive of data center design and layout.</li>
    <li>Healthcare – Internet / E-Mail migration project. Recommended, designed and implemented new Internet and E-Mail services for organization</li>
</ul>

(等)

然后您可以分离出css(样式)信息:

body { background-color: #fff; color: #000;
/* put your general settings here - e.g. background color, text color, margins, fonts, etc. */ 
}
h1, h2, h3, h4, h5, p, ul, li { margin: 10px; padding: 3px; }
h1 { font-size:28px; color:#F00; font-weight:bolder; }
h2 { font-size:16px; font-weight:bolder; }
h3 { background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF; }
h3.blue { background-color:#06F; /* blue background */ } 
h4 { color: #f00; font-size:14px; font-weight:bolder; }
h5 { font-weight: bolder; }
ul.disc { list-style-type: disc; } /* for lists with a disc as a marker */
.details { font-size:13px; font-weight: lighter; } /* detailed lists */

(等)

这将阻止您使用嵌套表格,使您的代码更清晰,我相信Word仍然可以使用样式信息。