如图中所示,最外层边框为实线,内部单元格边框为虚线
以下为HTML部分的一部分代码
<body><form action=""><table>/*设置表格代码*/<th>同城网在线调查<th><tr><td>你从哪里知道同城的</td><td><select name="where" id="1"><option value="">朋友告知</option><option selected="selected">网上搜索</option><option value="">传单</option></select></td></tr><tr><td>你正在使用的同城网服务</td><td><input type="checkbox">免费社区<input type="checkbox">免费留言簿<input type="checkbox">免费投票</td></tr><tr><td>你希望我们提供哪些新服务</td><td><input type="checkbox">聊天室<input type="checkbox">博客<input type="checkbox">游戏系统</td></tr><tr><td>你是同城网的会员吗</td><td><input type="radio">是<input type="radio">不是</td></tr><tr><td>你对同城网的其他意见</td><td><textarea id="01" cols="30" rows="10" style="overflow-y: scroll;"></textarea></td></tr><tr aria-colspan="2"><td></td><td><input type="submit" value="提交"></td></tr></table></form></body></html>
以下为css代码部分
在这里插入代码片table,th{border-spacing: 0em;margin-left: 1px;border: 1px solid #220808;border-collapse: collapse;}/*设置表格最外层边框实线*/th{color: white;background-color: rgba(38, 45, 59, 0.767);}td{border: 1px dashed;}/*设置单元格边框纵向虚线*/tr{vertical-align: top;border: 1px dashed;}/*设置单元格边框横向虚线*/
总结:主要搞清楚表格最外层边框(外框)与表格的单元格边框(内框)是由哪一部分决定的
外框:table
内框:td,tr