Question

表格如下图所示。

任何人都可以帮我解决html和css创建这个问题吗？我已经尝试了大约一两个小时。我不能在每张桌子周围找到一个单独的边框。以及间距。几乎所有我遇到麻烦的事情，我还不知道CSS，但我的讲师要求我们尝试一下。

td { "background-color: #D3D3D3;
  }
table {
    border:1 px; solid #D3D3D3;
}

<table>
<tr> 
<td> Short title: </td> 
<td> Data Driven Apps I </td>
</tr>
</table>

Answer 1

您可以使用边框间距和边框折叠实现样式，并使用colspan

连接列

演示：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>

我在设计一系列表格时遇到了麻烦

1 个答案: