Pomoc oko custom table bootstrap 3

Programiranje
1

Pozz

Dali se moze napraviti ovakav table http://prntscr.com/8vsxnn

<table class="table table-hover inner-table">
  <thead>
     <tr>
      <th>Game</th>
      <th>This week</th>
      <th>Total</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>COD2</td>
       <td>12</td>
       <td>1200</td>
     </tr>
     <tr> 
       <td>CS:GO</td>
       <td>30</td>
       <td>2300</td>
     </tr>
   </tbody>
</table>

css

.inner-table {
  width: 97%;
  margin: 10px;
}
2

Normalno da može.
http://www.w3schools.com/bootstrap/bootstrap_tables.asp

Izgled tablice je samo stvar CSS-a, kako češ ju oblikovati.

3

Znam to za table i izmjenit i sve, samo me ovo muci kako da napravim u <tbody><tr><td> ove boxove da izgledaju ko na slici.

4

Dodaš klasu na to, i promijeniš u CSS-u.

<tbody class="nesto">

.nesto{
   background-color:#000;
}

Ako već nećeš da mijenjaš kompletno sve tabele da izgledaju isto onda u CSS-u dodaješ :

tbody{
  background-color:#000;
}
5

Kuži on kako to ide sa CSS-om.
Ali ovdje su problem margine, ili nekakav
razmak između <tr> elementa…

Probao sam to iskucati u css-u - ali ne ide.
Margine u tablici se mogu “simulirati” sa borderom u istoj boji ili sa box-shadow,
ali ovdje je problem što uz margine ide i border.

Ja bih to naravio u listi ili nekom drugom elementu.
Tablice ograničavaju.

6

Naravno da ide.

<!doctype html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Table CSS</title>
        <style>
            .table-wrapper {
                padding: 6px;
                background-color: aliceblue;
                display: inline-block;
            }
            table {
                border-collapse: collapse;
                width: 760px;
                border-width: 1px;
            }
            table tr {
                border: 1px solid #333;
            }
            table tr.spacer {
                border: none;
                height: 10px;
            }
            thead {
                background: #000;
                color: #fff;
            }
            thead th, tbody th {
                padding: 10px 5px;
                text-align: left;
            }
            
        </style>  
    </head>
    <body>
       <div class="table-wrapper">
        <table class="table table-hover inner-table">
  <thead>
     <tr>
      <th>Game</th>
      <th>This week</th>
      <th>Total</th>
     </tr>
   </thead>
   <tbody>
     <tr class="spacer">
         <td colspan="3"></td>
     </tr>
     <tr>
       <td>COD2</td>
       <td>12</td>
       <td>1200</td>
     </tr>
     <tr class="spacer">
         <td colspan="3"></td>
     </tr>
     <tr> 
       <td>CS:GO</td>
       <td>30</td>
       <td>2300</td>
     </tr>
   </tbody>
</table>
   </div>
    </body>
</html>
1 Like
7

Hvala ti creatifcode to mi je trebalo :smiley: