我在设计一系列表格时遇到了问题
问题描述:
表格位于下面的附图中。我在设计一系列表格时遇到了问题
任何人都可以帮助我与HTML和CSS来创建?我一直在尝试一两个小时。我无法在每张桌子周围划一个单独的边框。以及间距。几乎所有我遇到的麻烦,我不知道CSS,但我的讲师要求我们尝试一下。
Tables I'm having trouble with
td { "background-color: #D3D3D3;
}
table {
border:1 px; solid #D3D3D3;
}
<table>
<tr>
<td> Short title: </td>
<td> Data Driven Apps I </td>
</tr>
</table>
答
可以实现与边框间距和边境崩溃的造型和与合并单元格
演示连接列:http://codepen.io/anon/pen/ZBEZNb
CSS :
table {
border-spacing:0 10px;
border-collapse:separate;
}
td {
padding:2px 10px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
td.gray {
background:#ddd
}
td:last-child {
border-right:1px solid #ddd;
}
HTML:
<table>
<tr>
<td class="gray">Short Title</td>
<td colspan="2">Data Driven Apps 1</td>
<td colspan="3"></td>
</tr>
<tr>
<td class="gray">Full Title</td>
<td colspan="2">Data Driven Apps 1</td>
<td colspan="3"></td>
</tr>
<tr>
<td class="gray">Attendance</td>
<td>N/A</td>
<td></td>
<td class="gray">Discipline</td>
<td colspan="2">Databases</td>
</tr>
<tr>
<td class="gray">Coordinator</td>
<td>Gerry</td>
<td></td>
<td class="gray">Department</td>
<td colspan="2">Information Technology</td>
</tr>
<tr>
<td class="gray">Official Code</td>
<td>GATB</td>
<td class="gray">NFQ Level</td>
<td>08</td>
<td class="gray">ECTS Credit</td>
<td>05</td>
</tr>
</table>
+0
非常感谢!我是这个网站的新手,我的问题措辞不佳,但谢谢你。 –
添加你已经尝试过。 –
编辑您的问题,并按CTRL + M并粘贴您的代码 – mlegg
对不起,对我来说,这是我问这个问题的方式很糟糕。 –