css - 划分表格的行

Question

我对 HTML 和 CSS 以及 bootstrap 有一点了解。我尝试设计一张与我附上的这张图片相似的 table 。

但我有一个问题，我不知道如何设计与这张照片相同的东西。

这是我的演示代码:fiddle

希望大家能帮帮我？非常感谢。

编辑:

我尝试了 Graham 的解决方案，但它与我的图片不一样。

update solutions

Answer 1

查看 DEMO，确定你可以实现的 Rest 样式 :)，如果卡在某个地方请告诉我。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>

        .bg-info {
            background-color: #5EC2F7 !important;
        }
        .borderTop {
            border-top: 2px solid black;
        }
        .borderBottom {
            border-bottom: 2px solid black;
        }
        .borderLeft {
            border-left: 2px solid black;
        }
    </style>
  <div class="container">
        
        <div class="row bg-info ">
            <div class="col-xs-6 borderTop borderLeft">風速</div>
            <div class="col-xs-6 borderTop  borderLeft ">0.9 m/s</div>
            <div class="col-xs-6 borderTop borderLeft">最大瞬間風速</div>
            <div class="col-xs-6 borderTop borderLeft">1.7 m/s</div>
            <div class="col-xs-6 borderLeft">
                <div class="row">
                    <div class="col-xs-6 borderTop borderLeft col-xs-offset-6 ">風向</div>
                </div>

            </div>
            <div class="col-xs-6 borderTop borderLeft">NE</div>
            <div class="col-xs-6 borderLeft">
                <div class="row ">
                    <div class="col-xs-6 borderTop  borderLeft col-xs-offset-6 ">起時</div>
                </div>
            </div>
            <div class="col-xs-6 borderTop borderLeft">13:23</div>
            <div class="col-xs-6 borderTop borderBottom borderLeft">5</div>
            <div class="col-xs-6 borderTop borderBottom borderLeft">5</div>
        </div>
    </div>