Mengatur lebar kolom tabel

204

Saya punya tabel sederhana yang digunakan untuk kotak masuk sebagai berikut:

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

Bagaimana cara mengatur lebar sehingga Dari dan Tanggal adalah 15% dari lebar halaman dan Subjek adalah 70%. Saya juga ingin tabel mengambil seluruh lebar halaman.

html css html-table alamodey
sumber

Jawaban:

318 

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    
    
    
    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>
Luaskan cuplikan

Gordon Gustafson
sumber
5
Seperti kebersihan solusi ini. Namun, harap tutup col misalnya <col span = "1" style = "width: 15%;" /> atau <col span = "1" style = "width: 15%;"> </col>
lsu_guy
23
@Isu_guy, Anda hanya menutup <col> saat menggunakan XHTML - dalam HTML, tag <col> tidak memiliki penutup ... lihat tautan untuk info lebih lanjut. Di HTML5, <col> adalah elemen yang tidak sah, artinya tidak boleh ditutup
Matija Nalis
4
@Score menurut w3schools.com/tags/att_col_width.asp "Atribut lebar <col> tidak didukung di HTML5."
Caltor
30
@Kaltor: kode tidak menggunakan <col> width attribute; itu menggunakan a CSS *style* width, yang menggantikan atribut lebar <col>. (terlepas dari banyaknya orang yang memilih komentar itu !!)
ToolmakerSteve
4
span="1"berlebihan karena 1 adalah default.
Madbreak
128

HTML:

<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>

CSS:

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

Praktik terbaik adalah menjaga HTML dan CSS Anda terpisah untuk duplikasi kode lebih sedikit, dan untuk pemisahan masalah (HTML untuk struktur dan semantik, dan CSS untuk presentasi).

Perhatikan bahwa, agar ini berfungsi di versi Internet Explorer yang lebih lama, Anda mungkin harus memberikan lebar spesifik meja Anda (misalnya, 900px). Peramban itu memiliki beberapa masalah dalam membuat elemen dengan dimensi persentase jika pembungkusnya tidak memiliki dimensi yang tepat.

Ron DeVera
sumber
solusi ini gagal jika Anda memiliki colspans di baris pertama
mark1234
3
Bagus karena <col width = ""> usang dalam HTML5: developer.mozilla.org/en/docs/Web/HTML/Element/col
Richard
30

Gunakan CSS di bawah ini, deklarasi pertama akan memastikan tabel Anda menempel pada lebar yang Anda berikan (Anda harus menambahkan kelas dalam HTML Anda):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}
Pete
sumber
Sebenarnya Anda hanya perlu menentukan lebar dua kolom. Yang ketiga akan dihitung secara otomatis, jadi table{table-layout:fixed};.from,.date{width:15%}sudah cukup. Kecuali jika kelas digunakan pada elemen lain juga, menulis th.fromitu berlebihan dan dapat disingkat menjadi adil .from.
tomasz86
14

Cara alternatif dengan hanya satu kelas sambil mempertahankan gaya Anda dalam file CSS, yang bahkan berfungsi di IE7:

<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>

Baru-baru ini, Anda juga dapat menggunakan nth-child()pemilih dari CSS3 (IE9 +), di mana Anda baru saja meletakkan nr. dari masing-masing kolom ke dalam tanda kurung alih-alih merangkai mereka bersama dengan pemilih yang berdekatan. Seperti ini, misalnya:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>
DanMan
sumber
:nth-childSolusi yang diajukan mengerikan dalam hal kinerja. Tidak ada alasan yang sah untuk menggunakannya (terutama dengan pemilih universal) dalam contoh ini di mana hanya ada tiga elemen ( thatau col) untuk gaya. Selain itu, Anda hanya perlu mengatur lebar ke dalam thdi baris pertama. Dalam .mytable tdcontoh pertama adalah redundan.
tomasz86
"Usulan: solusi anak ke-1 mengerikan dalam hal kinerja." - kutipan diperlukan.
DanMan
Ini harus cukup: CSS Rendering Efisien . Dengan penggunaan selektor universal, pertama-tama browser akan memeriksa SEMUA elemen apakah mereka anak ke-5 dari elemen lain, lalu apakah induk langsungnya adalah trdan kemudian milik mereka .mytable. Jika Anda benar-benar ingin menggunakan "n" maka sesuatu seperti ini mungkin akan jauh lebih baik: .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. Juga tidak perlu menentukan lebar kolom ketiga dalam hal ini.
tomasz86
Secara pribadi saya akan menggunakan kelas atau hanya .mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Selektor "n" sendiri mungkin sangat berguna tetapi dalam kasus khusus ini (sebuah meja kecil dengan hanya 3 kolom) tidak benar-benar diperlukan. Bila menggunakan table-layout: fixedAnda bahkan dapat melakukan hal ini: table{table-layout:fixed}th:first-child+th{width:70%}.
tomasz86
Saya sadar akan hal itu. Tetapi artikel-artikel itu berasal dari tahun-tahun yang lalu, dan ada masalah yang lebih besar hari ini yang menyeleksi CSS, seperti sejumlah besar gambar dan kode JS.
DanMan
8

Ini adalah dua saran saya.

  1. Menggunakan kelas. Tidak perlu menentukan lebar dua kolom lainnya karena mereka akan diatur ke masing-masing 15% secara otomatis oleh browser.

        table { table-layout: fixed; }
    .subject { width: 70%; }
        <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>
    Luaskan cuplikan

  2. Tanpa menggunakan kelas. Tiga metode berbeda tetapi hasilnya identik.

    Sebuah)

        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>
    Luaskan cuplikan

    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>
    Luaskan cuplikan

    c) Yang ini adalah favorit saya. Sama seperti b) tetapi dengan dukungan browser yang lebih baik.

        table { table-layout: fixed; }
    th:first-child+th { width: 70%; }
        <table>
      <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
      </tr>
    </table>
    Luaskan cuplikan

tomasz86
sumber
5

Bergantung pada tubuh Anda (atau div yang membungkus meja Anda) 'pengaturan' Anda harus dapat melakukan ini:

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>

Demo

Boris Guéry
sumber
5 

    table { table-layout: fixed; }
    .subject { width: 70%; }
    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>
Luaskan cuplikan

Hector David
sumber
4 
<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>

Demo

Srinivas Erukulla
sumber
8
Atribut lebar col tidak didukung dalam HTML5.
Rune
4

Coba ini sebagai gantinya.

<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>
Milan
sumber
3

Jangan gunakan atribut perbatasan, gunakan CSS untuk semua kebutuhan gaya Anda.

<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>

Tapi menanamkan CSS seperti itu adalah praktik yang buruk - orang harus menggunakan kelas CSS, dan meletakkan aturan CSS dalam file CSS eksternal.

Etienne Perot
sumber
1
Saya akan curiga bahwa kode contoh OP dan stackoverflowian bermanfaat diposting demi keterbacaan dan kesederhanaan, tidak berarti dorongan untuk gaya inline.
Tass
2

Berikut cara minimal lain untuk melakukannya di CSS yang berfungsi bahkan di browser lama yang tidak mendukung :nth-childdan penyeleksi sejenis: 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%;
}
DRD
sumber
2

Tambahkan colgroup setelah tag tabel Anda. Tentukan lebar dan jumlah kolom di sini. dan tambahkan tag tbody. Masukkan tr Anda di dalam tubuh.

<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>
Abdus Salam Azad
sumber
0 
style="column-width:300px;white-space: normal;"
Wut Worawit
sumber
Hai - selamat datang di Stack Overflow. Secara umum, jawaban dengan teks (bukan hanya kode) dan beberapa penjelasan dianggap lebih baik daripada hanya jawaban hanya kode. Karena pertanyaan ini lebih lama dan memiliki banyak jawaban lain, mereka dapat membantu membimbing Anda dalam jawaban di masa mendatang.
jwheron