今天完成的事情：

基本完成了任务8、9

学习了table标签及内元素tr、th、td

table表格边框折叠：

border-collapse:collapse;

table外边框可以取巧，设置一个table的边框来覆盖

tr,th {
    border: 1px solid #9d9d9d;
    word-break:break-all;
}

table {
    border: 2px solid white;
    border-collapse:collapse;
}

遇到的问题：

一、卡片文字溢出

文字需要自动换行，但是使用word-wrap:break-word 后依然无效

使用word-break:break-all 后成功换行

word-wrap:break-word 只针对超长的英文

word-break:break-all 针对所有字符

参考资料：https://www.cnblogs.com/dreamelapse/p/5371497.html

二、table表格奇怪的布局

<tr>
    <th rowspan="2" colspan="5" class="width50">
        <img src="../images/t8/job_01.png">
    </th>
    <th colspan="5">
        Web前端工程师
    </th>
</tr>
<tr>
    <td colspan="5">
        Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。
    </td>
</tr>

<tr>
    <td rowspan="3" colspan="3">
        薪资待遇
    </td>
    <td colspan="7">
        <span>0-1年</span>
        <span>5k-10k/月</span>
    </td>
</tr>
<tr>
    <td colspan="7">
        <span>0-1年</span>
        <span>5k-10k/月</span>
    </td>
</tr>
<tr>
    <td colspan="7">
        <span>0-1年</span>
        <span>5k-10k/月</span>
    </td>
</tr>

tr {
    width: 100%;
}

tr,th,td {
    border: 1px solid #9d9d9d;
    word-break:break-all;
}

th,td {
    height:50px;
}

table {
    width:100%;
    border: 2px solid white;
    border-collapse:collapse;
}

.width50 {
    width:50%
}

我使用的是colspan来调整不对齐的表格，整个表格分割为10列，到薪资待遇的那行，左右比例3:7，但是没有出现预期的错位效果

在给薪资待遇添加了宽度后，实现了效果

<td rowspan="3" colspan="3" class="width30">
    薪资待遇
</td>
<td colspan="7">
    <span>0-1年</span>
    <span>5k-10k/月</span>
</td>

.width30 {
    width: 30%;
}

但是缩小以后又出现了问题

错位非常严重。

在前面增加10个th，当成标尺使用

查看师兄昨天给的链接，终于发现了盲点，把colspan分成了10列，图片占了3列，导致的错位

重新编译后终于实现了效果，全部使用colspan即可，但要注意设置td的width，分成10列就要设置成10%，分成20列就要设置为5%

注：必须在首行设置空白的tr和th，当做标尺使用，否则会变形

总结：实现表格的错位效果，需要设置td的宽度，同时需要使用colspan才能实现效果

明天计划：

学会制作弹出式选项卡，彻底完成任务89

收获：

一、table的使用方式，包括tr、th、td标签的运用

二、table中rowspan以及colspan的灵活运用

三、复习了display、visibility、opacity隐藏元素的区别