html table呈现个人简历以及单元格宽度失效的问题

正确的实现代码如下:


<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人简历title>
head>
<body>
    <table width="800" border="1" align="center" cellpadding="10" cellspacing="0">
        <caption><h3>个人简历h3>caption>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">个人资料td>
        tr>
		<colgroup>
		       <col width=20%>col>
		       <col width=20%>col>
		       <col width=20%>col>
			   <col width=20%>col>
			   <col width=20%>col>
		colgroup>
        <tr>
            <td align="center">姓名td>
			<td>td>
            <td align="center">婚姻td>
			<td>td>
            <td rowspan="5"  align="center" valign="middle">照片td>
        tr>
		
        <tr>
            <td align="center">出 生td>
			<td>td>
            <td align="center">政治面貌td>
			<td>td>
        tr>
        <tr>
            <td align="center">性 别td>
			<td>td>
            <td align="center">民 族td>
			<td>td>
        tr>
        <tr>
            <td align="center">学 位td>
			<td>td>
            <td align="center">移动电话td>
			<td>td>
        tr>
        <tr>
            <td align="center">专 业td>
			<td>td>
            <td align="center">电子邮件td>
			<td>td>
        tr>
        <tr>
            <td colspan="5">地址:td>
        tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">教育背景td>
        tr>
        <tr>
            <td colspan="2">2012.9 - 2014.9td>
            <td colspan="3">中国海洋大学本科td>
        tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">特长及兴趣爱好td>
        tr>
        <tr>
            <td colspan="5">篮球、足球、羽毛球、游泳、旅游td>
        tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">计算机能力td>
        tr>
        <tr>
            <td colspan="5">精通html div+css javascript jQuery php linuxtd>
        tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">外语水平td>
        tr>
        <tr>
            <td colspan="5">通过英语专业四六,能熟练进行听说读写译td>
        tr>
    table>
body>
html>

效果:
html table呈现个人简历以及单元格宽度失效的问题_第1张图片

实现关键:
1)利用table的colspan和rowspan属性,进行单元格的合并。

2)table中使用了colspan后会导致列宽度失效。
因为一般表格都会定义一个table-layout: fixed;防止td被连串字符撑开,但是如果首行有合并单元格的话 TD宽度定义就会失效。
最好的办法,在最上边加以下代码来控制td宽度

<colgroup>
       <col width=20%>col>
       <col width=20%>col>
       <col width=20%>col>
	   <col width=20%>col>
	   <col width=20%>col>
colgroup>

单位也可以用PX,把这段代码放在 tr之前,或者tbody之前。

如果删除上面的控制代码,呈现效果就会如下:
html table呈现个人简历以及单元格宽度失效的问题_第2张图片
单元格的宽度变得不可预测。

你可能感兴趣的:(前端,css,excel,html,设计模式,css3)