html - 我在设计表格样式时遇到问题

Question

我必须构建此表格布局。有人可以帮我吗？

我在某些列中有虚线边框，在标题中也有白色边框，但我不知道如何制作这些东西。我对 CSS 有点陌生。

非常感谢您的帮助。

编辑一个----

我尝试的是:

.my_network_table {

  margin-left: 25%;
  margin-right: auto;

    border-collapse: separate;
    border-spacing: 0;
  table, td {
    border: 1px solid black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
    border-collapse:separate;
    border: solid #ccc 1px;
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
    border-bottom-left-radius: 0px 0px;
    border-bottom-right-radius: 0px 0px;
  }

  thead tr {
    background-color: black;
    color: white;
    padding: 5px;
    border-right: 1px solid white;
  }

}

但表格与预期结果相去甚远。

Answer 1

可能对你有帮助，

.my_network_table {
    border-radius: 5px;
    -moz-border-radius: 5px;
    border-collapse: separate;

    border-top-right-radius: 20px 20px;
    border-spacing: 0;}
 tbody td {
    border: 1px solid black;
    padding: 5px;
    border-collapse:separate;
    border-right: dotted #ccc;
    border-left: dotted #ccc;
    border-bottom: dotted #ccc;
    border-top: none;
  }
thead td {
    border: 1px solid white;
    padding: 5px;
    border-collapse:separate;

  }
  thead tr {
    background-color: black;
    color: white;
    padding: 5px;
    border-right: 1px solid white;
  }

.tdfirst{
     border-top-left-radius: 10px 10px;   
}
.tdlast{
     border-top-right-radius: 10px 10px;   
}

这是一个Fiddle Demo

基于您的代码的 fiddle 是 HERE