Простая схема:

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

Мне нужно установить фиксированную ширину для <td>. Я пробовал:

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

Также

td.something {
  width: 90px;
}

за

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

И даже

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

Но ширина <td>все та же.

Для Bootstrap 4.0:

В Bootstrap 4.0.0 вы не можете использовать col-*классы надежно (работает в Firefox, но не в Chrome). Вам нужно использовать ответ 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>

Для Bootstrap 3.0:

С помощью Twitter начальной загрузки 3 используйте: class="col-md-*"где * - количество столбцов ширины.

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

Для Bootstrap 2.0:

С помощью Twitter начальной загрузки 2 используйте: class="span*"где * - количество столбцов ширины.

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

** Если у вас есть <th>элементы, установите ширину там, а не на <td>элементы.

У меня возникла та же проблема, я исправил таблицу, а затем указал ширину ТД. Если у вас есть то, что вы можете сделать это.

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

Шаблон:

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

Пожалуйста, используйте CSS для структурирования любых макетов.

Вместо применения col-md-*классов к каждому tdв строке вы можете создать colgroupи применить классы к 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>

Демо здесь

Надеюсь, этот поможет кому-то:

<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

Если вы используете <table class="table">на своей таблице, класс таблицы Bootstrap добавляет ширину таблицы 100%. Вам нужно изменить ширину на авто.

Кроме того, если первая строка вашей таблицы является строкой заголовка, вам может потребоваться добавить ширину к th, а не к td.

В моем случае я смог решить эту проблему, используя min-width: 100pxвместо width: 100pxячеек thили td.

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

Для Bootstrap 4 вы можете просто использовать помощник класса:

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

Попробуй это -

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

Bootstrap 4.0

На Bootstrap 4.0 мы должны объявить строки таблицы как flex-box, добавив класс d-flex, а также отбросить суффиксы xs, md, чтобы Bootstrap автоматически выводил их из области просмотра.

Так будет выглядеть следующее:

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

Надеюсь, что это будет полезно для кого-то еще там!

Ура!

Это комбинированное решение работало для меня, я хотел, чтобы столбцы равной ширины

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Результат: -

Хорошо, я только что выяснил, в чем проблема - в Bootstrap widthдля selectэлемента задано значение по умолчанию , поэтому решение таково:

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

Все остальное не работает у меня.

Трудно судить без контекста страницы HTML или остальной части вашего CSS. Может быть множество причин, по которым ваше правило CSS не влияет на элемент td.

Вы пробовали более конкретные селекторы CSS, такие как

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

Это позволяет избежать переопределения вашего CSS более конкретным правилом из начальной загрузки CSS.

(кстати, в вашем встроенном образце css с атрибутом style вы указали ширину с ошибкой - это может объяснить, почему эта попытка не удалась!)

Некоторое время я боролся с этой проблемой, так что на всякий случай, когда кто-то совершает ту же глупую ошибку, что и я ... Внутри у <td>меня был элемент со white-space:preстилем. Это отбросило все мои трюки с таблицами / tr / td. Когда я удалил этот стиль, внезапно весь мой текст был красиво отформатирован внутри td.

Таким образом, всегда проверяйте основной контейнер (например, tableили td), но также всегда проверяйте, не отменяете ли вы свой красивый код где-то глубже :)

Используйте d-flex вместо строки для "tr" в Bootstrap 4

Дело в том, что класс "row" занимает больше ширины, чем родительский контейнер, что создает проблемы.

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

В bootstarp 4 вы можете использовать rowи col-*в таблице, я использую его, как показано ниже

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

Вот как я часто это делаю, когда мне не приходится иметь дело с 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>

Таким образом, вы можете иметь знакомую сетку из 12 столбцов.

Ничто из этого не работает для меня, и у меня есть много столбцов в datatable, чтобы класс% или sm равнялся разметке 12 элементов при начальной загрузке.

Я работал с таблицами данных Angular 5 и Bootstrap 4, и у меня в таблице много столбцов. Решение для меня было в том, THчтобы добавить DIVэлемент с определенной шириной. Например, для столбцов «Имя человека» и «Дата события» мне нужна конкретная ширина, затем поместите divв заголовок столбца, вся ширина столбца затем изменится на ширину, указанную в div на 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> ...

использовать. что- то без тд или й

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