Miałem ten sam problem, zrobiłem tabelę poprawioną, a następnie określiłem moją szerokość td. Jeśli masz th można zrobić te, jak również.

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ć klasy col-md-* do każdej td w wierszu, możesz utworzyć colgroup i zastosować klasy do znacznika col.

    <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

Jeśli używasz <table class="table"> na swoim stole, Klasa table Bootstrap dodaje do tabeli 100% szerokości. 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: 100px zamiast width: 100px dla komórek th lub td.

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

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

<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

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

To połączone rozwiązanie działało dla mnie, chciałem kolumn 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, właśnie zorientowałem się, gdzie jest problem - w Bootstrap jest ustawiony jako domyślna wartość width dla select elementu, więc rozwiązaniem jest:

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

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

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

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

Aby uniknąć nadpisania CSS przez bardziej szczegółową regułę z css bootstrap.

(przy okazji, w próbce inline css z atrybutem style, błędnie napisałeś szerokość - to może wyjaśniać, dlaczego ta próba się nie powiodł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... Wewnątrz <td> zastosowałem element ze stylem white-space:pre. To sprawiło, że wszystkie moje sztuczki table/tr/td zostały odrzucone. Kiedy usunąłem ten styl, nagle cały mój tekst został ładnie sformatowany wewnątrz td.

Więc zawsze sprawdzaj główny kontener (jak table lub td), ale również zawsze sprawdzaj, czy nie anulujesz kodu beautifull gdzieś głębiej:)

Bootstrap 4.0

W Bootstrap 4.0, musimy zadeklarować wiersze tabeli jako flex-Box, dodając klasę D-flex, a także upuść przyrostki xs, md, aby Bootstrap mógł automatycznie wyprowadzać je z widoku.

Więc będzie 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 to będzie pomocne dla kogoś innego tam!

Użyj .coś 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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Nic z tego nie działa dla mnie, i mają wiele cols na datatable, aby % Lub sm klasa była równa 12 elementom układu na bootstrap.

Pracowałem z datatables Angular 5 i Bootstrap 4, i mam wiele cols w tabeli. Rozwiązanie dla mnie było w TH, aby dodać DIV element o określonej szerokości. Na przykład dla cols "Nazwa osoby" i "data zdarzenia" potrzebuję określonej szerokości, a następnie umieścić div w nagłówku col, cała szerokość col zmieni rozmiar 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> ...