Bootstrap table within Bootstrap grid - spacing is correct for the first 3 tables, but the table isn't occupying all space in the 4th grid element

Question

I have been developing a GeoIP Attack Map, similar to the Norse Attack Map. I am trying to add a dashboard/legend to my app that will be updated and appended to as new data is processed by the data server. I am trying to use a bootstrap grid/table approach to styling, but I am having issues getting the final table to occupy all of the grid space it has been allocated. I am very new to bootstrap (I just started working with it yesterday) and my html/css styling in general could definitely use some work. All advice pertaining to any aspect of my approach is appreciated.

Link to project branch - https://github.com/MatthewClarkMay/geoip-attack-map.git

HTML:

    <div class='container-fluid'>
        <div class='row'>
        <div class='col-md-1'>
            <table class='table table-condensed' id='service-table'>
                <thead>
                    <tr>
                        <th class='text-center'>Color</th>
                        <th class='text-center'>Service</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td><div class='circle' id='ftp-color' style='background:#ff0000'></div></td>
                        <td>FTP</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='ssh-color' style='background:#ff8000'></div></td>
                        <td>SSH</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='telnet-color' style='background:#ffff00'></div></td>
                        <td>TELNET</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='email-color' style='background:#80ff00'></div></td>
                        <td>EMAIL</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='whois-color' style='background:#00ff00'></div></td>
                        <td>WHOIS</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='dns-color' style='background:#00ff80'></div></td>
                        <td>DNS</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='http-color' style='background:#00ffff'></div></td>
                        <td>HTTP</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='https-color' style='background:#0080ff'></div></td>
                        <td>HTTPS</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='sql-color' style='background:#0000ff'></div></td>
                        <td>SQL</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='snmp-color' style='background:#8000ff'></div></td>
                        <td>SNMP</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='smb-color' style='background:#bf00ff'></div></td>
                        <td>SMB</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='auth-color' style='background:#ff00ff'></div></td>
                        <td>AUTH</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='rdp-color' style='background:#ff0060'></div></td>
                        <td>RDP</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='dos-color' style='background:#ffccff'></div></td>
                        <td>DOS</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='icmp-color' style='background:#ffcccc'></div></td>
                        <td>ICMP</td>
                    </tr>

                    <tr>
                        <td><div class='circle' id='other-color' style='background:#ffffff'></div></td>
                        <td>OTHER</td>
                    </tr>
                </tbody>
            </table> <!--close service-table-->
        </div> <!--close container service col-->
        <div class='col-md-2'>
            <table class='table table-condensed' id='continent-origin-table'>
                <thead>
                    <tr>
                        <th class='text-center' style='width:20%;' >Count</th>
                        <th class='text-center' style='width:80%;'>Continent</th>
                    </tr>
                </thead>
                <tbody>
                    <!--APPEND CONTENT HERE-->
                </tbody>
            </table> <!--close continent-origin-table-->
        </div> <!--close continent-origin col-->

        <div class='col-md-2'>
            <table class='table table-condensed' id='country-origin-table'>
                <thead>
                    <tr>
                        <th class='text-center' style='width:20%;'>Count</th>
                        <th class='text-center' style='width:20%;'>Flag</th>
                        <th class='text-center' style='width:60%;'>Country</th>
                    </tr>
                </thead>
                <tbody>
                    <!--APPEND CONTENT HERE-->
                </tbody>
            </table> <!--close country-origin-table-->
        </div> <!--close country-origin col-->
        <div class='col-md-7'>
            <table class='table table-condensed' id='live-attacks-table'>
                <thead>
                    <tr>
                        <th class='text-center' style='width:20%;'>Timestamp</th>
                        <th class='text-center' style='width:20%;'>IP</th>
                        <th class='text-center' style='width:10%;'>Flag</th>
                        <th class='text-center' style='width:20%;'>Country</th>
                        <th class='text-center' style='width:20%;'>City</th>
                        <th class='text-center' style='width:10%;'>Service</th>
                    </tr>
                </thead>
                <tbody>
                <!--APPEND TABLE ROWS HERE-->
                </tbody>
            </table> <!--close live-attacks-table-->
        </div> <!--close live-attack col-->
        </div>
    </div> <!--close dashboard-->

CSS:

body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#map {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    bottom:0;
}
.circle {
    height:18px;
    width:18px;
    border-radius:50%;
    margin:0px;
}
.container-fluid {
    height:25%;
    width:100%;
    position:absolute;
    bottom:3.5%;
    background:black;
    opacity:0.7;
}
table {
    height:100%;
    margin:0px;
}
tbody {
    height:100%;
    display:block;
    overflow-y:scroll;
}
tr {
    display:block;
}
th, td {
    color:white;
}
.col-md-1 {
    height:100%;
}
.col-md-2 {
    height:100%;
}
.col-md-7 {
    height:100%;
}
#service-table th, td {
    width:100%;
}
.row {
    height:100%;
}

The links in you're question and comment on my answer are dead. I don't know the appropriate branch to pull for 'fixing your table problem'. — DigiLive, Mar 31 '16 at 22:22

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

according to the bootstrap docs, .col-xx-xx must be a child of .row which in turn is a child of .container or .container fluid.

Please take a look at the example at the bootstrap docs, properly setup your HTML and check if it's ok now.

Example:

<div class="container">
     <div class="row">
          <div class="col-md-7">
              Content 1
          </div>
          <div class="col-md-5">
              Content 2
          </div>
      </div>
 </div>

EDIT: I see your problem now. It's because you apply the display: block on tbody and tr (for overflowing). I suggest taking a look at this site to create a tbody with overflow by CSS. Or this Stack Overflow question by CSS and javascript. Unfortunately you have to make use of fixed widths/heights.

edited May 23 '17 at 12:24

Community

1
1

answered Mar 23 '16 at 22:31

DigiLive

1,093
1
11
28

Please update the code in your post so I can copy/paste – DigiLive Mar 24 '16 at 05:28
As I mentioned in my edit, it's not quite possible to get what you want by applying `display: block;` to tbody and tr. Take a look at the links I've added, how to create a scrollable tbody. – DigiLive Mar 24 '16 at 20:05
Ahh I see now, I'll play with it a bit and report back when I resolve the issue. Thanks! – Matthew May Mar 25 '16 at 00:12
I ended up hacking it up by wrapping each table in a div and just accepting that the table headers would not be absolute. I don't want to use absolute widths so it's a compromise I have to make for now. Might come back to the issue later, but programmer time is valuable so I've moved on to bigger problems. If you want to see my final result you can check out the second branch of the project. I haven't pulled it into master yet. https://github.com/MatthewClarkMay/geoip-attack-map/tree/bootstrap_dash_div_overflow – Matthew May Mar 27 '16 at 16:46
Do you mind giving up transparency for the header row? – DigiLive Mar 29 '16 at 18:00

Bootstrap table within Bootstrap grid - spacing is correct for the first 3 tables, but the table isn't occupying all space in the 4th grid element

1 Answers1