it-swarm.com.ru

Как установить фиксированную ширину для <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> остается прежней.

418
user984621

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

902
Paulo

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

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

Шаблон:

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

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

107
DDDD

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

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

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

53
meobyte

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

<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

37
OhadR

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

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

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

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

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>
9
Rohit Suthar

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

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Результат: -

 enter image description here

7
Hitesh Sahu

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>

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

Ура!

4
Randika Vishman

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

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

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

3
user984621

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

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

2
Mikk

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

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

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

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

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

2
David Heijl

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

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

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

0
user10861319

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