Bootstrap-как настроить фиксированную ширину?

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

  <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> все то же самое.

15 ответов


Для 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 bootstrap 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 bootstrap 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> элементы.


у меня была та же проблема, я сделал таблицу фиксированной, а затем указал ширину 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"> на вашем столе класс таблицы Bootstrap добавляет ширину 100% к таблице. Вам нужно изменить ширину на auto.

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


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

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

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

<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


для 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>

это комбинированное решение работало для меня, я хотел одинаковую ширину столбцов

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

результат:

enter image description here


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

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

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


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

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

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

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

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


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

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


Bootstrap 4.0

в Bootstrap 4.0 мы должны объявить строки таблицы как flex-коробки, добавив класс d-flex, а также drop 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>

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

Ура!


использовать .что-то!--3--> без 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>

ничего из этого не работает для меня, и у меня много cols на datatable, чтобы сделать % или SM класс равным 12 элементам макета на bootstrap.

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