Ustawianie szerokości kolumny tabeli


202

Mam prostą tabelę używaną do skrzynki odbiorczej w następujący sposób:

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

Jak ustawić szerokość, aby Od i Data stanowiły 15% szerokości strony, a Temat - 70%. Chcę też, aby tabela zajmowała całą szerokość strony.

Odpowiedzi:


319

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


5
Podobnie jak czystość tego rozwiązania. Proszę jednak zamknąć kolumnę, np. <Col span = "1" style = "width: 15%;" /> lub <col span = "1" style = "szerokość: 15%;"> </col>
lsu_guy

23
@ Isu_guy zamykasz <col> tylko podczas korzystania z XHTML - w HTML tag <col> nie ma zamknięcia ... zobacz link, aby uzyskać więcej informacji. W HTML5 <col> jest pustym elementem, co oznacza, że NIE WOLNO go zamykać
Matija Nalis

4
@Zulu według w3schools.com/tags/att_col_width.asp „Atrybut szerokości <col> nie jest obsługiwany w HTML5.”
Caltor

30
@Caltor: kod nie używa <col> width attribute; używa a CSS *style* width, co zastąpiło atrybut szerokości <col>. (pomimo wielu osób głosujących za tym komentarzem !!)
ToolmakerSteve

4
span="1"jest zbędny, ponieważ 1 jest wartością domyślną.
Madbreaks

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 */
}

Najlepszą praktyką jest oddzielanie kodu HTML i CSS w celu zmniejszenia duplikacji kodu oraz rozdzielenia problemów (HTML dla struktury i semantyki oraz CSS dla prezentacji).

Pamiętaj, że aby działało to w starszych wersjach Internet Explorera, może być konieczne nadanie tabeli określonej szerokości (np. 900 pikseli). Ta przeglądarka ma pewne problemy z renderowaniem elementu o wymiarach procentowych, jeśli jego opakowanie nie ma dokładnych wymiarów.


to rozwiązanie zawiedzie, jeśli masz colspany w pierwszym rzędzie
mark1234

3
Dobrze, ponieważ <col width = ""> jest przestarzały w HTML5: developer.mozilla.org/en/docs/Web/HTML/Element/col
Richard

30

Skorzystaj z poniższego CSS, pierwsza deklaracja zapewni, że twoja tabela będzie trzymać się podanych przez ciebie szerokości (musisz dodać klasy w swoim HTML):

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

W rzeczywistości musisz tylko określić szerokość dwóch kolumn. Trzeci zostanie obliczony automatycznie, więc table{table-layout:fixed};.from,.date{width:15%}wystarczy. O ile klasy nie są używane również w innych elementach, pisanie th.fromjest zbędne i można je skrócić do sprawiedliwego .from.
tomasz86

14

Alternatywny sposób z tylko jedną klasą przy jednoczesnym zachowaniu stylów w pliku CSS, który działa nawet w 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>

Niedawno możesz także użyć nth-child()selektora z CSS3 (IE9 +), w którym po prostu wstawiłeś nr. odpowiedniej kolumny w nawiasie zamiast ciągnąć je razem z sąsiednim selektorem. W ten sposób na przykład:

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

Proponowane :nth-childrozwiązanie jest okropne pod względem wydajności. Nie ma żadnego uzasadnionego powodu, aby go używać (zwłaszcza z selektorem uniwersalnym) w tym przykładzie, w którym istnieją tylko trzy elementy ( thlub col) do stylu. Ponadto wystarczy ustawić szerokość thna pierwszy wiersz. .mytable tdW pierwszym przypadku jest zbędny.
tomasz86

„Proponowane: n-dziecko rozwiązanie jest okropne pod względem wydajności”. - wymagany cytat.
DanMan

To powinno wystarczyć: Wydajne renderowanie CSS . Za pomocą selektora uniwersalnego przeglądarka najpierw sprawdzi WSZYSTKIE elementy, czy są n-tym dzieckiem innego elementu, a następnie czy ich bezpośredni rodzic jest, tra następnie, czy należą do .mytable. Jeśli naprawdę chcesz korzystać z „n-ty”, a następnie coś jak to będzie prawdopodobnie znacznie lepiej: .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. W tym przypadku nie ma również potrzeby określania szerokości trzeciej kolumny.
tomasz86

Osobiście korzystałbym z zajęć lub po prostu .mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Same selektory „n-te” mogą być bardzo przydatne, ale w tym konkretnym przypadku (niewielki stół z tylko 3 kolumnami) nie są tak naprawdę potrzebne. Podczas korzystania table-layout: fixedmożna nawet zrobić tylko to: table{table-layout:fixed}th:first-child+th{width:70%}.
tomasz86

Jestem tego świadomy. Ale te artykuły pochodzą sprzed wielu lat, a selektory CSS mają dziś większe problemy, takie jak ogromne ilości obrazów i kodu JS.
DanMan

8

To są moje dwie sugestie.

  1. Korzystanie z zajęć. Nie ma potrzeby określania szerokości dwóch innych kolumn, ponieważ zostaną one automatycznie ustawione na 15% przez przeglądarkę.

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

  2. Bez korzystania z klas. Trzy różne metody, ale wynik jest identyczny.

    za)

        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>

    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>

    c) Ten jest moim ulubionym. To samo co b), ale z lepszą obsługą przeglądarki.

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


5

W zależności od twojego ciała (lub div, który owija twój stół) „ustawień” powinieneś być w stanie to zrobić:

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>

Próbny


5

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


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>

Próbny


8
Atrybut szerokości kolumny nie jest obsługiwany w HTML5.
Run

4

Spróbuj tego zamiast tego.

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

3

Nie używaj atrybutu border, użyj CSS do wszystkich swoich stylizacji.

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

Ale osadzanie CSS w ten sposób jest słabą praktyką - zamiast tego należy użyć klas CSS i umieścić reguły CSS w zewnętrznym pliku CSS.


1
Podejrzewam, że przykładowy kod opublikowany przez OP i pomocne stackoverflowians był dla czytelności i prostoty, w żadnym wypadku nie zachęcając do wbudowanych stylów.
Tass

2

Oto kolejny minimalny sposób na zrobienie tego w CSS, który działa nawet w starszych przeglądarkach, które nie obsługują :nth-childi podobnych selektorach: 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%;
}

2

Dodaj colgroup po tagu tabeli. W tym miejscu określ szerokość i liczbę kolumn. i dodaj tag tbody. Umieść tr w ciele.

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

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

Cześć - witamy w Stack Overflow. Ogólnie rzecz biorąc, odpowiedzi zawierające tekst (zamiast tylko kodu) i niektóre wyjaśnienia są postrzegane jako lepsze niż tylko odpowiedzi zawierające tylko kod. Ponieważ to pytanie jest starsze i zawiera wiele innych odpowiedzi, mogą pomóc ci w przyszłych odpowiedziach.
jwheron
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.