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

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

За допомогою завантажувального class="col-md-*"пристрою twitter 3 використовують: де * - це ряд стовпців шириною.

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

За допомогою завантажувального class="span*"пристрою twitter 2 використовується: де * - це ряд стовпців шириною.

<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>елементах.

У мене була така ж проблема, я зробив таблицю виправленою, а потім вказав свою ширину 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/isissue/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.

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

Я певний час боровся з цим питанням, так що про всяк випадок, коли хтось робить ту саму дурну помилку, як я ... Всередині <td>мене був елемент із white-space:preзастосованим стилем. Це призвело до відмови всіх моїх прийомів з таблицею / tr / td. Коли я видалив цей стиль, раптом весь мій текст був добре відформатований всередині td.

Отже, завжди перевіряйте основний контейнер (наприклад, tableабо td), але також завжди перевіряйте, чи не відміняєте ви прекрасний код десь глибше :)

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

Вся справа в тому, що клас "рядок" займає більше ширини, ніж батьківський контейнер, який вводить проблеми.

<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 колодок.

Нічого цього не працює для мене, і є багато команд на даних, щоб зробити клас% або sm рівним розмітці 12 елементів на завантажувальній системі.

Я працював з таблицями даних Angular 5 і Bootstrap 4, і в таблиці є багато знаків. Для мене рішення було в тому, THщоб додати 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> ...

використовувати .щось без td чи 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>