Jak ustawić stałą szerokość dla <td>?


513

Prosty schemat:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

Muszę ustawić stałą szerokość dla <td>. Próbowałem:

tr.something {
  td {
    width: 90px;
  }
}

Również

td.something {
  width: 90px;
}

dla

<td class="something">B</td>

I nawet

<td style="width: 90px;">B</td>

Ale szerokość <td>jest nadal taka sama.


1
Właśnie próbowałem i działa - może problem jest gdzieś inny. Co Firebug mówi ci o tym elemencie?
Rockbot

Na tej stronie mężczyzna opowiada na ten temat za pomocą wideo. To jest takie jasne.
egemen

użyj, style="width: 1% !important;"aby ustawić szerokość tak wąską, jak najdłuższe słowo w kolumnie, jest to przydatne dla pierwszej kolumny ID / #. Testowane w Chrome (na komputery i urządzenia mobilne), opera (na komputery), IE (na komputery), edge (na komputery), Firefox (na komputery)
vinsa

Odpowiedzi:


1084

W przypadku Bootstrap 4.0:

W Bootstrap 4.0.0 nie można col-*niezawodnie korzystać z klas (działa w Firefoksie, ale nie w Chrome). Musisz użyć odpowiedzi OhadR :

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

W przypadku Bootstrap 3.0:

Z twitter bootstrap 3 użyj: class="col-md-*"gdzie * to liczba kolumn szerokości.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

W przypadku Bootstrap 2.0:

Z twitter bootstrap 2 użyj: class="span*"gdzie * to liczba kolumn szerokości.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** Jeśli masz <th>elementy, ustaw szerokość tam, a nie na <td>elementach.


79
Co się stanie, jeśli masz więcej niż 12 kolumn?
ClearCloud8,

33
możesz zastosować to tylko w <head> w każdym tagu <th>, a wszystkie wiersze będą pasować
Diego Fernando Murillo Valenci

7
Czy jest na ten temat dokumentacja na stronie Bootstrap?
Luis Perez

26
To działa, ale nie ma go na stronie bootstrap, ponieważ te klasy col- * nie są przeznaczone do użycia w ten sposób. Są przeznaczone do użycia w responsywnych siatkach bootstrap. Jeśli podoba Ci się to, co robią, zastanów się nad ich CSS i skopiuj go, aby stworzyć własny CSS.
DustinA

1
Ponadto zamiast ustawiać klasę dla wiersza zasięgu, możemy po prostu ustawić ją raz dla nagłówka <th>, a resztę zajmie się automatycznie!
dopplesoldner

133

Miałem ten sam problem, naprawiłem tabelę, a następnie określiłem szerokość td. Jeśli masz, możesz to zrobić.

table {
    table-layout: fixed;
    word-wrap: break-word;
}

Szablon:

<td style="width:10%">content</td>

Proszę używać CSS do strukturyzowania dowolnych układów.



To jest dobre, ale jako użytkowania Dodatkowo classw tdtagu zamiast stosowania styl bezpośrednio
Ramses

1
Działa to dzięki lepiej , aby zwiększyć szerokość thpodobnego: <th style="width: 25%;"></th>spowoduje to zmianę szerokości innych kolumn
shaijut

Dziękuję Ci! Ustawiłem klasę col-md-x dla Bootstrap 3, ale to nie działało. Ustawienie układu tabeli na „naprawiono” rozwiązuje mój problem.
maurisrx

To działa. Kluczem jest table-layout: fixed. Jest to wymagane, ponieważ wiele szablonów zbudowanych z BS4 stosuje flex do wszystkiego, w tym do tabel.
Ivan

73

Zamiast stosować col-md-*klasy do każdej tdw rzędzie, możesz utworzyć a colgroupi zastosować klasy do colznacznika.

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

Demo tutaj


1
Wolę to, ale wydaje się, że nie ma to wpływu na mój przypadek, szerokość kolumny nie rozszerza się o col-md- *
Osify

Nawiasem mówiąc, podoba mi się to rozwiązanie, dlaczego ktoś zmuszony jest używać klas col-md- *, a nie col-lg- *, col-sm- * lub col-xs- *?
LucioB

1
@LucioB możesz użyć, co chcesz, a nawet użyć kilku z nich według kolumn (przykład <col class="col-md-4 col-sm-6">będzie miał szerokość 33% w średnim rozmiarze ekranu i 50% w małym rozmiarze ekranu)
VDarricau

1
Colgroup nie działa w Chrome. (Bootstrap v4.1). Aby uzyskać jednolitość w różnych przeglądarkach, użyj% width dla elementów <td>.
AnkitK

57

Mam nadzieję, że ten pomoże komuś:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863


1
Najłatwiejsza w użyciu odpowiedź
GavinBelson

54

Jeśli używasz <table class="table"> na stole, klasa tabeli Bootstrap dodaje do stołu szerokość 100%. Musisz zmienić szerokość na auto.

Ponadto, jeśli pierwszy wiersz tabeli jest wierszem nagłówka, może być konieczne dodanie szerokości do th zamiast td.


1
Jako dodatek do Bootstrap 3 będziesz musiał także ustawić właściwość białych thznaków na wartość normalną, ponieważ jest ona teraz pusta, ponieważ takie nagłówki się nie zepsują.
Sammaye

41

W moim przypadku udało mi się rozwiązać ten problem, używając min-width: 100pxzamiast width: 100pxdla komórek thlub td.

.table td, .table th {
    min-width: 100px;
}

13
To mogło zachować to, co zostało z mojego zdrowia psychicznego.
Joel

Tak! ustawia to, cóż, minimalną szerokość kolumny w responsywnej tabeli. Dzięki.
O. Jones

1
działało to lepiej niż odpowiedź na pytanie, dzięki!
Izrael

38

W przypadku Bootstrap 4 możesz po prostu użyć pomocnika klasy:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

5
To pasuje do mojego przypadku użycia. Dzięki!
tonny

16
Ważne jest, aby pamiętać, że jedynymi opcjami w- * są: .w-25, .w-50, .w-75, .w-100, .w-autowięc jeśli chcesz czegoś innego, powiedz, w-10musisz dodać .w-10 { width: 10% !important; }do zlokalizowanego pliku css.
Abela,

10

Spróbuj tego -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

3
To jedyny, który działa spośród wszystkich innych odpowiedzi.
0bserver07

Dodałem również, text-overflow: ellipsisaby upewnić się, że odcięty tekst jest widoczny
weekdev

@ Observer07 Rzeczywiście
TheRandomGuy

9

Bootstrap 4.0

W Bootstrap 4.0 musimy zadeklarować wiersze tabeli jako flex-box, dodając klasę d-flex, a także upuszczając przyrostki xs, md, aby umożliwić Bootstrapowi automatyczne wyprowadzenie go z okienka ekranu.

Będzie więc wyglądać następująco:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

Mam nadzieję, że będzie to pomocne komuś innemu!

Twoje zdrowie!


7

To połączone rozwiązanie działało dla mnie, chciałem kolumny o równej szerokości

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

Wynik: -

wprowadź opis zdjęcia tutaj


3

Ok, po prostu zorientowali się, gdzie był problem - w Bootstrap jest ustawiony jako wartość domyślną widthdla selectelementu, a tym samym rozwiązanie to:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

Nic innego mnie nie działa.


2

Trudno oceniać bez kontekstu html strony lub reszty CSS. Może istnieć ponad milion powodów, dla których twoja reguła CSS nie wpływa na element td.

Czy próbowałeś bardziej szczegółowych selektorów CSS, takich jak

tr.somethingontrlevel td.something {
  width: 90px;
}

Dzięki temu CSS nie zostanie zastąpiony przez bardziej szczegółową regułę z css bootstrap.

(nawiasem mówiąc, w twojej wbudowanej próbce css z atrybutem stylu źle wpisałeś szerokość - to może wyjaśnić, dlaczego ta próba się nie udała!)


2

Od jakiegoś czasu zmagam się z tym problemem, więc na wypadek, gdyby ktoś popełnił ten sam głupi błąd co ja ... W środku <td>miałem element zwhite-space:pre stylem. To spowodowało odrzucenie wszystkich moich sztuczek table / tr / td. Kiedy usunąłem ten styl, nagle cały mój tekst został ładnie sformatowany wewnątrztd .

Więc zawsze sprawdź główny pojemnik (jak tablelub td), ale zawsze sprawdź, czy nie anulujesz swojego pięknego kodu gdzieś głębiej :)


1

Użyj d-flex zamiast wiersza dla „tr” w Bootstrap 4

Chodzi o to, że klasa „row” ma większą szerokość niż kontener nadrzędny, co wprowadza problemy.

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>


Miałem na myśli „wiersz” zamiast „tr”. Ponieważ klasa rzędów ma rynny na obu końcach. Lub jeśli nie chcesz używać klasy „row”, po prostu dodaj klasę „no-gutters”.
Usman Anwar

1

W bootstarp 4 można użyć rowi col-*na stole, używam go jak poniżej

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

1

Tak często robię, gdy nie mam do czynienia z IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

W ten sposób możesz mieć znajomą siatkę z 12 kolumnami.


0

Nic z tego nie działa dla mnie i ma wiele cols na datatable, aby klasa% lub sm była równa układowi 12 elementów na bootstrap.

Pracowałem z danymi Angular 5 i Bootstrap 4 i mam wiele cols w tabeli. Rozwiązaniem było dla mnie THdodanie DIVelementu o określonej szerokości. Na przykład dla cols „Person Name” i „Event date” potrzebuję określonej szerokości, następnie wstawiam a divw nagłówku col, cała szerokość col następnie zmienia się na szerokość określoną z div na TH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

-1

użyj czegoś bez td lub th

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>


-2

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>


Dodaj też wyjaśnienie.
Akash Dubey

Ta odpowiedź jest co najwyżej myląca. Klasy są dziwnymi, nieistotnymi identyfikatorami, bez wyjaśnienia.
GotBatteries
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.