Tablo sütun genişliğini ayarlama

Aşağıdaki gibi bir gelen kutusu için kullanılan basit bir tablo var:

<table border="1">
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>

Genişliği, Başlangıç ​​ve Tarih sayfa genişliğinin% 15'i ve Konu% 70 olacak şekilde nasıl ayarlarım. Tablonun tüm sayfa genişliğini kaplamasını da istiyorum.

table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

En iyi uygulama, daha az kod çoğaltma ve endişelerin ayrılması ( yapı ve anlambilim için ve sunum için) için HTMLve CSSayrı tutmaktır .HTMLCSS

Bunun Internet Explorer'ın eski sürümlerinde çalışması için tablonuza belirli bir genişlik (ör. 900 piksel) vermeniz gerekebileceğini unutmayın. Bu tarayıcı, sarmalayıcısının tam boyutları yoksa, yüzde boyutları olan bir öğeyi oluştururken bazı sorunlar yaşıyor.

Aşağıdaki CSS'yi kullanın, ilk bildirim tablonuzun sağladığınız genişliklere yapışmasını sağlayacaktır (sınıfları HTML'nize eklemeniz gerekir):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

IE7'de çalışan bir CSS dosyasında stillerinizi korurken tek bir sınıfla alternatif yol:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

Daha yakın zamanda, nth-child()sadece nr'yi koyacağınız CSS3 (IE9 +) 'dan seçici de kullanabilirsiniz . ilgili sütunun, bitişik seçiciyle birlikte dizmek yerine parantezin içine yerleştirin. Bunun gibi, örneğin:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

Bunlar benim iki önerim.

1. Sınıfları kullanma. Tarayıcı tarafından her biri otomatik olarak% 15 olarak ayarlanacağı için diğer iki sütunun genişliğini belirtmeye gerek yoktur.

       table { table-layout: fixed; }
       .subject { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th class="subject">Subject</th>
           <th>Date</th>
         </tr>
       </table>

   Kod snippet'ini çalıştırSonuçları gizle

   Snippet'i genişlet

2. Sınıfları kullanmadan. Üç farklı yöntem ama sonuç aynı.

   a)

       table { table-layout: fixed; }
       th+th { width: 70%; }
       th+th+th { width: 15%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   Kod snippet'ini çalıştırSonuçları gizle

   Snippet'i genişlet

   b)

       table { table-layout: fixed; }
       th:nth-of-type(2) { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   Kod snippet'ini çalıştırSonuçları gizle

   Snippet'i genişlet

   c) Bu benim favorim. B) ile aynıdır ancak daha iyi tarayıcı desteğine sahiptir.

       table { table-layout: fixed; }
       th:first-child+th { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   Kod snippet'ini çalıştırSonuçları gizle

   Snippet'i genişlet

Vücudunuza (veya tablonuzu saran div'a) 'ayarlar' bağlı olarak bunu yapabilmeniz gerekir:

body {
  width: 98%;
}

table {
  width: 100%;
}


th {
  border: 1px solid black;
}


th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}


<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

gösteri

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

gösteri

Bunun yerine bunu deneyin.

<table style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>

Border niteliğini kullanmayın, tüm stil ihtiyaçlarınız için CSS kullanın.

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

Ancak CSS'yi bu şekilde yerleştirmek zayıf bir uygulamadır - bunun yerine CSS sınıflarını kullanmalı ve CSS kurallarını harici bir CSS dosyasına koymalıdır.

Desteklemeyen eski tarayıcılarda :nth-childve benzeri seçicilerde bile çalışan CSS'de yapmanın başka bir minimum yolu : http://jsfiddle.net/3wZWt/ .

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

CSS:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

Tablo etiketinizden sonra colgroup ekleyin. Sütun genişliğini ve sayısını burada tanımlayın. ve tbody etiketini ekleyin. Tr tbody içine koymak.

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>


    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>

style="column-width:300px;white-space: normal;"