CODEWITHSUNDEEP
htmlcsstwitter-bootstrapspring-mvc
mrk
mrk

Reputation: 99

Two bootstrap tables side by side

I want to put two bootstrap tables side by side like it is answered in this question:

Two side by side tables in bootstrap

Unfortunately I don't get the result mentioned there.

My Code looks like this:

<html>
<style>
    body {background-color: black;}
</style>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-jqueryui.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>

<script type="text/javascript" src="webjars/datatables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap.js"></script>        
<script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-xs-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="col-xs-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

And what I get looks like this:

enter image description here

Thanks in advance

Upvotes: 2

Views: 6911

Answers (5)

Nims Patel
Nims Patel

Reputation: 1056

Try Its : 

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="row">

        <div class="col-lg-6 col-md-6 col-sm-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Message</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Message</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>


    </body>
    </html>

Upvotes: 3

Mahantesh Gurav
Mahantesh Gurav

Reputation: 1

If you want two tables(side by side) in mobiles screen and desktop screen, then - change this <div class="col-sx-6"> to <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

And if you want two tables in desktop screen and not in mobile screen. Change this <div class="col-sx-6"> to <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

Upvotes: 0

JasperZelf
JasperZelf

Reputation: 2844

You've made a typo on both the columns. You wrote col-sx-6 instead of col-xs-6. (column, show it like this on extra small screens and bigger, width of 6)

When using col-sx-6, it is just a div, which will be 100% wide. Changing it to col-xs-6 will fix your problem.

Also, in bootstrap it is common to place your <div class="row"> inside a <div class="container">. See: https://getbootstrap.com/docs/3.3/css/#overview-container

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Your code, using col-xs-6</h1>
<div class="row">
    <div class="col-sx-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="col-sx-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<h1>Corrected code using col-xs-6</h1>
<div class="row">
    <div class="col-xs-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="col-xs-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
</div>

Upvotes: 2

Pedram
Pedram

Reputation: 16615

You should do something like below, for all resolutions:

col-lg-6 col-md-6 col-sm-6 col-xs-6


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <table class="table">
      <thead>
        <tr>
          <th>Time</th>
          <th>Location</th>
          <th>Message</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <table class="table">
      <thead>
        <tr>
          <th>Time</th>
          <th>Location</th>
          <th>Message</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

Upvotes: 0

Hardik Gondalia
Hardik Gondalia

Reputation: 3717

You have typo in your code. you need to replace

<div class="col-sx-6">

with 

<div class="col-xs-6">

Upvotes: 1

Related Questions