我在设置桌子时遇到了问题

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

基于您的代码的小提琴 HERE