App下載

html個(gè)人簡(jiǎn)歷單元格寬度失效怎么解決？html table個(gè)人簡(jiǎn)歷案例分享！

可樂(lè)派掌門人 2021-08-17 11:51:00 瀏覽數(shù) (1847)
反饋

在尋找工作的時(shí)候我們會(huì)使用應(yīng)聘的工作簡(jiǎn)歷，那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于“html個(gè)人簡(jiǎn)歷單元格寬度失效怎么解決？”這個(gè)問(wèn)題的解決方法！希望對(duì)大家有所幫助！

正確的實(shí)現(xiàn)代碼如下：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>個(gè)人簡(jiǎn)歷</title>
</head>
<body>
    <table width="800" border="1" align="center" cellpadding="10" cellspacing="0">
        <caption><h3>個(gè)人簡(jiǎn)歷</h3></caption>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">個(gè)人資料</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">學(xué) 位</td>
			<td></td>
            <td align="center">移動(dòng)電話</td>
			<td></td>
        </tr>
        <tr>
            <td align="center">專 業(yè)</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.9</td>
            <td colspan="3">中國(guó)海洋大學(xué)本科</td>
        </tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">特長(zhǎng)及興趣愛(ài)好</td>
        </tr>
        <tr>
            <td colspan="5">籃球、足球、羽毛球、游泳、旅游</td>
        </tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">計(jì)算機(jī)能力</td>
        </tr>
        <tr>
            <td colspan="5">精通html div+css javascript jQuery php linux</td>
        </tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">外語(yǔ)水平</td>
        </tr>
        <tr>
            <td colspan="5">通過(guò)英語(yǔ)專業(yè)四六，能熟練進(jìn)行聽(tīng)說(shuō)讀寫譯</td>
        </tr>
    </table>
</body>
</html>

效果：

個(gè)人簡(jiǎn)歷

實(shí)現(xiàn)關(guān)鍵：
1）利用table的colspan和rowspan屬性，進(jìn)行單元格的合并。
2）table中使用了colspan后會(huì)導(dǎo)致列寬度失效。
因?yàn)橐话惚砀穸紩?huì)定義一個(gè)table-layout: fixed;防止td被連串字符撐開(kāi)，但是如果首行有合并單元格的話 TD寬度定義就會(huì)失效。
最好的辦法，在最上邊加以下代碼來(lái)控制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之前。

如果刪除上面的控制代碼，呈現(xiàn)效果就會(huì)如下：

個(gè)人簡(jiǎn)歷截圖

單元格的寬度變得不可預(yù)測(cè)。

那么以上就是今天有關(guān)于：“html個(gè)人簡(jiǎn)歷單元格寬度失效怎么解決？”這個(gè)問(wèn)題的解決方法和相關(guān)內(nèi)容，更多有關(guān)于html5使用的內(nèi)容我們都能在W3Cschool學(xué)習(xí)到自己想要的內(nèi)容！


HTML5

0 人點(diǎn)贊