Nasıl tablo satırları ve sütunları arasında istenmeyen alanı kaldırmak için?

SORU

17 ŞUBAT 2010, ÇARŞAMBA

Nasıl tablo satırları ve sütunları arasında istenmeyen alanı kaldırmak için?

ne kadar tabloda satır ve sütunları arasında fazladan boşluk kaldırırım.

Masada marjı, dolgu ve çeşitli sınır özellikleri ve tr ve td değiştirmeyi denedim.

Resimler Tamam yanyana bir büyük resim gibi görünmesini istiyorum.

bunu nasıl telafi etmeliyim?

stil.css

table {
    border-collapse:collapse;

}

index.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Tera Byte Video Game Creation Camp</title>
    <link rel="stylesheet" type="text/css" href="style.css"></link>
  </head>
  <body>
      <table class="mytable" align="center">
         <tr class = "header"><td colspan="3"><img src="images/home_01.png" /></td></tr>
         <tr class = "top"><td colspan="3"><img src="images/home_02.png" /></td></tr>
         <tr class = "link-row">
             <td><img src="images/home_03.png" /></td>
             <td><img src="images/home_04.png" /></td>
             <td><img src="images/home_05.png" /></td>
         </tr>
         <tr class = "link-row">
              <td><img src="images/home_07.png" /></td>
              <td><img src="images/home_06.png" /></td>
              <td><img src="images/home_08.png" /></td>
          </tr>
          <tr class = "link-row">
               <td><img src="images/home_09.png" /></td>
               <td><img src="images/home_10.png" /></td>
               <td><img src="images/home_11.png" /></td>
           </tr>
           <tr class = "link-row">
                <td><img src="images/home_12.png" /></td>
                <td><img src="images/home_13.png" /></td>
                <td><img src="images/home_14.png" /></td>
            </tr>
            <tr class = "bottom"><td colspan="3"><img src="images/home_15.png"/ ></td></tr>
      </table>

  </body>
</html>

CEVAP

17 ŞUBAT 2010, ÇARŞAMBA

Vectran cevabı ekleme: ayrıca cellspacing masaya çapraz tarayıcı uyumluluğu. öğesi özniteliği ayarlamak zorunda

<table cellspacing="0">

DÜZENLE (bütünlüğü uğruna 5 yıl sonra bu genişletiyorum:):

Internet Explorer 6veInternet Explorer 7tablo öznitelik olarak cellspacing doğrudan ayarlamak için gerekli, aksi halde boşluğu yok olmaz.

Internet Explorer 8ve sonraki sürümler ve popüler tarayıcıların tüm diğer sürümleriChrome, Firefox, Opera, 4- CSS özelliği border-spacing destek.

Çapraz tarayıcı bir tablo hücre aralığı Sıfırla (dinozor bir tarayıcı olarak IE6 destek) yapmak için, aşağıda kod örneğini izleyin:

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

Bunu Paylaş: