Как установить фиксированную ширину для <td>?

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

  <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> остается неизменной.

TylerH
Редактировал вопрос 3-го января 2019 в 8:05
Программирование
css html-table twitter-bootstrap width
27-го февраля 2013 в 2:50
35 просмотров
Комментарии к вопросу (2)
Решение

Для Bootstrap 4.0:

В Bootstrap 4.0.0 вы не можете использовать коль-* классы надежную (работает в 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 Использование: класс="и коль-МД-*" В где * - количество столбцов в ширину.

<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 использовать: класс="в пролете*" В где * - количество столбцов в ширину.

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

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

MaPePeR
Редактировал ответ 23-го февраля 2018 в 11:26
Комментарии (10)

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

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

Шаблон:

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

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

Hunter Medney
Редактировал ответ 25-го июня 2015 в 10:32
Комментарии (4)

Вместо применения коль-МД-* мастер-классы тд в строке вы можете создать элемент colgroup и применить классы к тегу седла.

    <table class="table table-striped">




        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

Демо здесь

Комментарии (4)

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

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

Комментарии (1)

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

<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

Murat Ozgul
Редактировал ответ 4-го апреля 2016 в 10:19
Комментарии (0)

В моем случае я был в состоянии исправить эту проблему с помощью мин-ширина: 100 пикселей вместо ширина: 100 пикселей ячеек й или ТД.

.table td, .table th {
    min-width: 100px;
}
ThiagoPXP
Редактировал ответ 16-го октября 2015 в 6:24
Комментарии (6)

Для 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>
      ...
Комментарии (3)

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


 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
Комментарии (3)

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



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

        table th, table td {
            overflow: hidden;
        }

Результат :-

Комментарии (0)

Ушко 4.0

На Bootstrap 4.0, мы должны объявить строки таблицы как Flex-коробки путем добавления класса D-флекс, а также падение хз, МД, суффиксы, чтобы загрузчик автоматически выводят его из просмотра.

Так он будет выглядеть следующим образом:

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

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

Ура!

Комментарии (0)

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

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

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

Комментарии (0)

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

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

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

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

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

Комментарии (0)

Я'вэ боролся с такой проблемой на некоторое время, так только в том случае, когда кто-то делает ту же глупую ошибку, как и я... Внутри в <тд> у меня был элемент белый-пространство:стиль пре-прикладной. Что делало все мои таблицы/тр/тд уловок, которые выбрасывают. Когда я убрал этот стиль, вдруг весь мой текст был хорошо отформатирован внутритд`.

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

Комментарии (0)

Использование гибкого вместо строки и"ТР" в ушко 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>

в

Комментарии (0)

использования .что-то не ТД или й

в 




  Bootstrap Example 


    .something {
      width: 90px;
      background: red;
    }




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

в

Комментарии (0)

Ничего из этого не работает для меня, и есть много столбцов в объект DataTable, чтобы сделать % или класс см равна 12 элементов макета на Bootstrap.

Я работал с таблицами 5 угловых и Bootstrap 4, и есть много столбцов в таблице. Решение для меня было в Й добавить элемент див с определенной ширины. Например, для седла "в лицо" и "Событие дата" Я нужен определенной ширины, затем положить див в столбец заголовка, всего коль ширина затем изменяется до заданной ширины от div на "й": 

<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> ...
Stephen Rauch
Редактировал ответ 5-го сентября 2018 в 3:08
Комментарии (0)

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

<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>
Liam
Редактировал ответ 13-го ноября 2019 в 2:07
Комментарии (0)

в 

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>

в

Комментарии (2)