CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
Khanh Pham
Khanh Pham

Reputation: 2973

Divide rows of table

I have a little knowledge about HTML and CSS and bootstrap. And i tried to design a table similar this picture which i attached.

But i had a problem that i didn't know how to design same as this picture.

enter image description here

This is my demo code: fiddle

Hope everybody can help me ? Thank you very much.

Edit:

I tried to Graham's solution, but it didn't same as my picture. enter image description here

update solutions

Upvotes: 0

Views: 59

Answers (2)

caldera.sac
caldera.sac

Reputation: 5088

job done, this is what you want. try this

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

Upvotes: 0

Anil Panwar
Anil Panwar

Reputation: 2622

See the DEMO, Rest styles you can implement am sure :), if stuck somewhere do let me know.

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

Upvotes: 1

Related Questions