Generic placeholder image

Table Contextual

Ditanyakan 3 bulan yang lalu oleh Saptaji

kenapa Table Contextual saya tidak berwarna? padahal udah sama persis

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Index</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="container">
  <h2>Contextual</h2>
  <table class="table">
        <thead>
            <tr>
            <th>No</th>
            <th>Class</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-success">
            <td>1</td>
            <td>table-success</td>
            </tr>
            <tr class="table-warning">
            <td>2</td>
            <td>table-warning</td>
            </tr>
            <tr class="table-danger">
            <td>3</td>
            <td>table-danger</td>
            </tr>
            <tr class="table-info">
            <td>4</td>
            <td>table-info</td>
            </tr>
            <tr class="table-active">
            <td>5</td>
            <td>table-active</td>
            </tr>
        </tbody>
    </table>
  </div>    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>    
</html>

1 JAWABAN / 2 KOMENTAR

Generic placeholder image
Ahmad Oriza menjawab 2 bulan yang lalu

Halo mas,

Fitur table berwarna ada di bootstrap 4, pastikan sudah memasang bootstrap 4 dengan baik. Bisa jadi dalam folder css pada saat memanggil bootstrap gagal. Sebaiknya gunakan CDN agar lebih yakin.

Saya sudah coba edit kode punya mas dan alhasil berhasil. Ternyata masalahnya ada di versi bootstrap yang salah. Kodenya jadi seperti ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Index</title>

    <!-- Bootstrap -->
    <!-- <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
     -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="container">
  <h2>Contextual</h2>
  <table class="table">
        <thead>
            <tr>
            <th>No</th>
            <th>Class</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-success">
            <td>1</td>
            <td>table-success</td>
            </tr>
            <tr class="table-warning">
            <td>2</td>
            <td>table-warning</td>
            </tr>
            <tr class="table-danger">
            <td>3</td>
            <td>table-danger</td>
            </tr>
            <tr class="table-info">
            <td>4</td>
            <td>table-info</td>
            </tr>
            <tr class="table-active">
            <td>5</td>
            <td>table-active</td>
            </tr>
        </tbody>
    </table>
  </div>    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>    
</html>

Dan hasilnya sudah bener :