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

1824   15  

15 ответов:

Для Bootstrap 4.0:

в Bootstrap 4.0.0 вы не можете использовать col-* классы надежно (работает в Firefox, но не в Chrome). Вы должны использовать ответ Охадра:

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

847  
2018-02-23 13:26:27

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

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

шаблон:

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

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

101  
2015-06-26 01:32:54

вместо применения 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>

демо здесь

67  
2015-01-30 05:17:50

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

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

51  
2013-02-27 17:08:52

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

.table td, .table th {
    min-width: 100px;
}
31  
2015-10-16 09:24:11

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

<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

31  
2016-04-05 01:19:28

для 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>
      ...
8  
2018-06-07 13:23:15

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

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>
7  
2014-07-30 09:24:17

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

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

результат:

enter image description here

5  
2017-03-06 15:06:36

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

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

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

3  
2013-02-27 17:06:04

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

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

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

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

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

2  
2013-02-27 16:56:54

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

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

2  
2016-12-21 13:39:34

Bootstrap 4.0

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

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

Ура!

2  
2018-05-20 11:28:45

использовать .что-то без 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>[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>
0  
2018-02-15 03:55:18

ничего из этого не работает для меня, и есть много cols на datatable, чтобы сделать % или SM class равным 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> ...
0  
2018-09-05 06:08:41

Comments

    Ничего не найдено.
Click here to cancel reply.