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.

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.

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.

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

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

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.

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

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

Spróbuj tego -

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

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!

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

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.

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

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

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>

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>

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.

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

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>