tablonun sağındaki boşluklar

03-10-2018, 21:49:52

Kimlik doğrulama veya yönetimden onay bekliyor.

Bi tablo oluşturdumda bu sağdaki boşlukları yok edemedim acaba ne yapabilirim? 2 sütun daha eklersem boşluk kapanıyor fakat 7 sütunla yapmak istiyorum. tablo basit tablo aslında fakat ben yeni uğraşmaya başladım. her sorunumda konu açarsam vay halimize

nereye sorsam bilemedim

<div class="container mt-5">
    <div class="row">
      <div class="col-md-12">
        <div class="table-responsive table-bordered">
          <table class="table">
            <thead>
              <tr>
                <th colspan="8" class="text-center">Şampiyon Listesi</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Ahri.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Akali.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Alistar.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Amumu.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Anivia.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Annie.png" width="80" height="80"  alt=""></a></td>
 
              </tr>
              <tr>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>

              </tr>
              <tr>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>

              </tr>
              <tr>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Annie.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>

              </tr>
              <tr>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Annie.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>

              </tr>
              <tr>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Annie.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
              </tr>
              <tr>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Annie.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
              </tr>
              <tr>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Annie.png" width="80" height="80"  alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
                <td><a href="#"><img src="img/Aatrox.png" width="80" height="80" alt=""></a></td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
 
    </div>
  
  </div>

03-10-2018, 21:55:49

#2

onur34

table koduna border="0" cellspacing="0" cellpadding="0" filan yazmayını denediniz mi

03-10-2018, 21:57:59

#3

Amxmodx

onurbusar adlı üyeden alıntı: mesajı görüntüle

table koduna border="0" cellspacing="0" cellpadding="0" filan yazmayını denediniz mi

evet denedim öğeyi inceleden de kurcaladım fakat çözemedim

03-10-2018, 21:59:24

#4

Onur89TR

table.table tr td img { width: 100% !important; }
dener misin?

03-10-2018, 22:34:47

#5

Amxmodx

Onur89TR adlı üyeden alıntı: mesajı görüntüle

table.table tr td img { width: 100% !important; }
dener misin?

yine olmadı hocam dediğimgibi fakat resimleri genişleterek o boşluğu doldurdu

03-10-2018, 23:20:11

#6

BestCoder

1. Resimleri ortalayarak sağ taraftaki boşluğu her iki tarafa dağıtabilirsin. Bunun için her td için <td align="center"> yapmak lazım
2. Resimleri biraz daha büyütmek yoluna gidilebilir. Onu için de her img width değer girebilirsin, height otomatik gelir.
3. Tabloyu daraltabilirsin.<table class="table" style="width:initial !important" width="0" align="center"> yapılabilir sanırım. Aynı zamanda 2. satırdaki td ler <td width="0"> yapılmalı.

bunlardan biri sorununu çözebilir sanırım.

04-10-2018, 03:22:00

#7

hasanbugra

tablonun her sütunu için genişliği 80px yapıp cellpadding ve cellspacingleri 0'a eşitlemeyi denermisin

04-10-2018, 04:14:27

#8

thealiyasar

@Amxmodx;

img {

    display: block;
    margin: 0 auto;

}

resimlere class ata bu koduda class içine ekle daha mantıklı olur resimler ortalı durucak boşluklar sabit olucak

04-10-2018, 10:11:45

#9

Amxmodx

Birdilimask adlı üyeden alıntı: mesajı görüntüle

@Amxmodx;

img {

    display: block;
    margin: 0 auto;

}

resimlere class ata bu koduda class içine ekle daha mantıklı olur resimler ortalı durucak boşluklar sabit olucak

onun yerine div e text-center diyerek hepsini ortaladım. Ama ben mobildeki gibi istiyordum neyse şimdilik böyle kalsın. CSS eklemeleriyle düzelttim şimdi dediğim gibi oldu