CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user6925364
user6925364

Reputation:

Table Bootstrap doesn't show up well - HTML & CSS

I have a table here: http://americanbitcoinacademy.com/test/table.html

And I am using bootstrap. Right now it doesn't show the way this page: http://v4-alpha.getbootstrap.com/content/tables/#table-head-options actually does.

Here's my code:

<section class="section-padding extra-margin-top">
  <div class="container">
      <div class="row">
          <div class="col-md-12">

  <table class="table table-hover table-responsive">
    <thead class="thead-inverse">
      <tr>
        <th>Student ID</th>
        <th>Username</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Subjects</th>
        <th>Teachers</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>@mdo, @sds</td>
        <td>@mdo, Geoms</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
    </tbody>
  </table>

</div>
</div>
</div>
</section>

I was wondering what went wrong why I cannot get the same exact styles like this: http://v4-alpha.getbootstrap.com/content/tables/#table-head-options

And how can I attain such the same exact look?

Note: I used bootstrap.min.css already you can use Chrome's inspector element to check it out.

Upvotes: 0

Views: 1478

Answers (5)

Akydev
Akydev

Reputation: 16

Your code work proper for table.if you have bootstrap in your local system. just make sure your bootstrap stylesheet and js path location will be in correct format between head tags. or you can give its location from their site:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script
</head>

your code work fine with this have a look: https://codepen.io/anon/pen/apwaXJ

Upvotes: 0

S.Serpooshan
S.Serpooshan

Reputation: 7440

you ref bootstrap 3.3.1 in your site, but the sample you compare with is from bootstrap 4 alpha!

Use this css ref for bootstrap 4 alpha:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

It is obvious that you can also download and use it as a local css in your site. There is a class inside that css to set background of thead-inverse th to a dark color:

.thead-inverse th {
  color: #fff;
  background-color: #292b2c;
}

Here is your html with proper stylesheet link reference:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<section class="section-padding extra-margin-top">
  <div class="container">
      <div class="row">
          <div class="col-md-12">

  <table class="table table-hover table-responsive" style="display: table;">
    <thead class="thead-inverse">
      <tr>
        <th>Student ID</th>
        <th>Username</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Subjects</th>
        <th>Teachers</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>@mdo, @sds</td>
        <td>@mdo, Geoms</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
    </tbody>
  </table>

</div>
</div>
</div>
</section>

Upvotes: 1

Yonas Hailu
Yonas Hailu

Reputation: 853

They're adding some extra element with different styles like bd-example class. here is the changes I made.

body {
	background: #fff;
}
.bd-example {
    position: relative;
    margin: 1rem -1rem;
    border: solid #f7f7f9;
		padding: 1.5rem;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    border-width: .2rem;
}
table {
    border-collapse: collapse;
    background-color: transparent;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}
thead th {
    color: #fff;
    background-color: #292b2c;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #eceeef;
}
.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #eceeef;
}
<section class="section-padding extra-margin-top">
  <div class="container">
      <div class="row">
          <div class="col-md-12">

<div class="bd-example">
  <table class="table table-hover table-responsive">
    <thead class="thead-inverse">
      <tr>
        <th>Student ID</th>
        <th>Username</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Subjects</th>
        <th>Teachers</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>@mdo, @sds</td>
        <td>@mdo, Geoms</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>@fat</td>
        <td>@fat</td>
      </tr>
    </tbody>
  </table>

</div>
</div>
</div>
</div>
</section>

Upvotes: 0

D Johnson
D Johnson

Reputation: 36

Add bootstrap stylesheet location if you have it in your local system or else give its location from their site<head> <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.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head>

Upvotes: 0

Gururaj Bhandarkar
Gururaj Bhandarkar

Reputation: 292

You can add background color and font color to class thead-inverse.

.thead-inverse{
    background: black;
    color: white;
}

you will get same look.

Upvotes: 1

Related Questions