Question

我对HTML和CSS以及bootstrap有一点了解。我试图设计一张类似这张照片的表格。

但是我遇到了一个问题，我不知道如何设计这张照片。

这是我的演示代码：fiddle

希望每个人都可以帮助我吗？非常感谢你。

修改

我尝试了格雷厄姆的解决方案，但它与我的照片不一样。

update solutions

Answer 1

参见DEMO，你可以实现的休息风格:)，如果卡在某处，请告诉我。

<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>

Answer 2

完成工作，这就是你想要的。试试这个

        <tr>
          <td><span class="pull-right">風向</span></td>
          <td>NE</td>
        </tr>

划分表格行

2 个答案: