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

403

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

  <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> остается прежней.

  • 1
    Я только что попробовал, и это работает - возможно, проблема в другом. Что Firebug говорит вам об элементе?
  • 0
    На этом сайте мужчина рассказывает об этой теме с помощью видео. Это так ясно.
Теги:
html-table
width

15 ответов

922
Лучший ответ

Для 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>.

  • 70
    Что произойдет, если у вас более 12 столбцов?
  • 26
    Вы можете применить это только в <head> в каждом теге <th>, и все строки будут совпадать
Показать ещё 8 комментариев
107

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

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

Шаблон:

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

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

  • 0
    Это здорово, но в качестве дополнения используйте class в теге td вместо непосредственного применения стиля
Показать ещё 2 комментария
64

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

Демо здесь

  • 1
    Я предпочитаю это, но это, кажется, не влияет на мой случай, ширина столбца не увеличивается на col-md- *
  • 0
    Кстати, мне нравится это решение, почему кто-то вынужден использовать классы col-md- *, а не col-lg- *, col-sm- * или col-xs- *?
Показать ещё 2 комментария
53

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

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

  • 1
    В качестве дополнения к Bootstrap 3 вам также нужно будет установить свойство пробела th в нормальное состояние, поскольку в настоящее время оно перезаписывается, поскольку такие заголовки не ломаются.
32

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

.table td, .table th {
    min-width: 100px;
}
  • 12
    Это, возможно, сохранило то, что осталось от моего здравомыслия.
  • 0
    Да! это устанавливает, ну, минимальную ширину для столбца в адаптивной таблице. Благодарю.
Показать ещё 4 комментария
31

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

<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

12

Для 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
    Это подходит для моего случая использования. Спасибо!
  • 2
    Работает очень хорошо для Bootstrap 4, спасибо!
Показать ещё 1 комментарий
8

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

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>
  • 3
    Это единственный, который работает из всех других ответов.
  • 0
    Я также добавил text-overflow: ellipsis чтобы убедиться, что обрезанный текст очевиден
Показать ещё 1 комментарий
6

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

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Результат: -

Изображение 2320

3

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>

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

Ура!

3

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

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

Что-то еще не работает.

2

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

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

2

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

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

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

Это, чтобы ваш CSS был переопределен более конкретным правилом из bootstrap css.

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

0

Ничего из этого не работает для меня, и у меня есть много столбцов в 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> ...
0

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню