App下載

html個人簡歷單元格寬度失效怎么解決？html table個人簡歷案例分享！

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

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

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

<!doctype html>
<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">專 業(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">中國海洋大學本科</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 linux</td>
        </tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">外語水平</td>
        </tr>
        <tr>
            <td colspan="5">通過英語專業(yè)四六，能熟練進行聽說讀寫譯</td>
        </tr>
    </table>
</body>
</html>

效果：

個人簡歷

實現(xiàn)關(guān)鍵：
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之前。

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

個人簡歷截圖

單元格的寬度變得不可預測。

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


HTML5

0 人點贊