Como configurar a largura fixa para <td>?


514

Esquema simples:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

Eu preciso configurar uma largura fixa para <td>. Eu tentei:

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

Além disso

td.something {
  width: 90px;
}

para

<td class="something">B</td>

E até mesmo

<td style="width: 90px;">B</td>

Mas a largura <td>ainda é a mesma.


1
Eu apenas tentei e funciona - talvez o problema esteja em algum lugar diferente. O que o Firebug lhe diz sobre o elemento?
Rockbot

Neste site , o homem está falando sobre esse tópico com vídeo. Isso é tão claro.
Egemen # 4/14

use style="width: 1% !important;"para tornar a largura tão estreita quanto a palavra mais longa da coluna, é útil para a primeira coluna ID / #. Testado em chrome (desktop e celular), opera (desktop), IE (desktop), edge (desktop), firefox (desktop)
vinsa 30/01

Respostas:


1084

Para o Bootstrap 4.0:

No Bootstrap 4.0.0, você não pode usar as col-*classes de maneira confiável (funciona no Firefox, mas não no Chrome). Você precisa usar a resposta do 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>

Para o Bootstrap 3.0:

Com o twitter bootstrap 3, use: class="col-md-*"where * é um número de colunas de largura.

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

Para o Bootstrap 2.0:

Com o twitter bootstrap 2, use: class="span*"where * é um número de colunas de largura.

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

** Se você possui <th>elementos, defina a largura lá e não nos <td>elementos.


79
O que acontece se você tiver mais de 12 colunas?
ClearCloud8

33
você pode aplicar esta apenas no <head> em cada tag <th> e todas as linhas irá corresponder
Diego Fernando Murillo Valenci

7
Existe documentação sobre isso no site Bootstrap?
Luis Perez

26
Isso funciona, mas não está no site de bootstrap porque essas classes col- * não devem ser usadas dessa maneira. Eles devem ser usados ​​nas grades de autoinicialização responsivas. Se você gosta do que eles fazem, considere olhar o CSS para eles e copie-o para criar seu próprio CSS.
precisa saber é o seguinte

1
Além disso, em vez de definir a classe para a linha de alcance, podemos simplesmente defini-la uma vez para o cabeçalho <th> e o restante é resolvido automaticamente!
Dopplesoldner

133

Eu estava tendo o mesmo problema, corrigi a tabela e especifiquei minha largura td. Se você tiver, pode fazê-lo também.

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

Modelo:

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

Por favor, use CSS para estruturar qualquer layout.



Isso é ótimo, mas como um uso além de uma classna tdtag em vez de aplicar o estilo diretamente
Ramses

1
Isso funciona graças melhor apenas o suficiente para aumentar a largura do thtipo: <th style="width: 25%;"></th>isso afetará outras colunas largura
shaijut

Obrigado! Eu configurei a classe col-md-x para o Bootstrap 3, mas não funcionou. Definir o layout da tabela como "corrigido" resolve meu problema.
maurisrx

Isso funciona. A chave é o table-layout: fixed. Isso é necessário porque muitos modelos criados com o BS4 aplicam flexibilidade a tudo, inclusive tabelas.
Ivan

73

Em vez de aplicar as col-md-*classes a cada uma tdna linha, você pode criar colgroupe aplicar as classes à coltag.

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

Demonstração aqui


1
Eu prefiro este, mas parece não afetar ao meu caso, a coluna largura não prorrogar por col-Md- *
Osify

A propósito, gosto dessa solução: por que alguém é forçado a usar as classes col-md- * e não col-lg- *, col-sm- * ou col-xs- *?
LucioB

1
@LucioB você pode usar o que quiser e até mesmo usar vários deles por coluna (exemplo <col class="col-md-4 col-sm-6">terá uma largura de 33% no tamanho da tela médio e 50% no tamanho da tela pequena)
VDarricau

1
O Colgroup não está funcionando no Chrome. (Bootstrap v4.1). Para uniformidade nos navegadores, use% width para os elementos <td>.
AnkitK

57

Espero que este ajude alguém:

<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


1
Resposta mais fácil de usar
GavinBelson 27/02

54

Se você estiver usando <table class="table">em sua tabela, a classe de tabela do Bootstrap adiciona uma largura de 100% à tabela. Você precisa alterar a largura para automático.

Além disso, se a primeira linha da sua tabela for uma linha de cabeçalho, talvez seja necessário adicionar a largura a th em vez de td.


1
Como complemento no Bootstrap 3, você também precisará definir a propriedade de espaço em branco thcomo normal, uma vez que ela é atualmente quebrada atualmente, pois esses cabeçalhos não quebram.
Sammaye 14/03/14

41

No meu caso, consegui corrigir esse problema usando em min-width: 100pxvez de width: 100pxpara as células thou td.

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

13
Isso pode ter preservado o que resta da minha sanidade.
Joel

Sim! isso define, bem, a largura mínima para uma coluna em uma tabela responsiva. Obrigado.
O. Jones

1
isso funcionou melhor do que a pergunta respondida, obrigado!
israel

38

Para o Bootstrap 4, você pode simplesmente usar o auxiliar de classe:

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

5
Isso é adequado para o meu caso de uso. Obrigado!
tonny

16
Importante notar que as únicas opções w- * são: .w-25, .w-50, .w-75, .w-100, .w-autoportanto, se você quiser algo mais, digamos, w-10precisará adicionar .w-10 { width: 10% !important; }ao seu arquivo css localizado.
Abela

10

Tente isto -

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

3
Este é o único que funciona com todas as outras respostas.
0bserver07

Eu também adicionei text-overflow: ellipsispara garantir que o texto de corte é aparente
weeksdev

@ Observer07 Indeed
TheRandomGuy 14/03

9

Bootstrap 4.0

No Bootstrap 4.0, temos que declarar as linhas da tabela como flex-boxes adicionando a classe d-flex, e também soltar sufixos xs, md, para permitir que o Bootstrap o deduza automaticamente da viewport.

Então, será o seguinte:

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

Espero que isso seja útil para alguém por aí!

Felicidades!


7

Esta solução combinada funcionou para mim, eu queria colunas de largura igual

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Resultado: -

insira a descrição da imagem aqui


3

Ok, eu apenas descobri onde estava o problema - no Bootstrap é configurado como um valor padrão widthpara o selectelemento, portanto, a solução é:

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

Qualquer outra coisa não funciona comigo.


2

Difícil de julgar sem o contexto da página html ou o resto do seu CSS. Pode haver um zilhão de razões pelas quais sua regra CSS não está afetando o elemento td.

Você já tentou seletores CSS mais específicos, como

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

Isso evita que seu CSS seja substituído por uma regra mais específica do css de autoinicialização.

(a propósito, em sua amostra de CSS embutido com o atributo style, você digitou incorretamente a largura - isso pode explicar por que essa tentativa falhou!)


2

Estou lutando com o problema há um tempo, por isso, quando alguém comete o mesmo erro estúpido que eu ... Por dentro, <td>eu tinha o elemento com white-space:preestilo aplicado. Isso fez com que todos os meus truques de tabela / tr / td fossem descartados. Quando removi esse estilo, de repente todo o meu texto estava bem formatado dentro do td.

Portanto, sempre verifique o contêiner principal (como tableou td), mas também verifique se você não cancelou seu código bonito em algum lugar mais profundo :)


1

Use d-flex em vez de linha para "tr" no Bootstrap 4

O problema é que a classe "row" ocupa mais largura que o contêiner pai, o que introduz problemas.

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


Eu quis dizer "linha" em vez de "tr". Como a classe row vem com calhas nas duas extremidades. Ou, se você não quiser usar a classe "row", basta adicionar a classe "no-gutters".
Usman Anwar

1

No bootstarp 4 você pode usar rowe col-*na tabela, eu uso como abaixo

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

1

É assim que costumo fazer quando não preciso lidar com o IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

Dessa forma, você pode ter uma grade familiar de 12-col.


0

Nada disso funciona para mim e tenho muitas colunas na tabela de dados para tornar a classe% ou sm igual ao layout de 12 elementos no bootstrap.

Eu estava trabalhando com as tabelas de dados Angular 5 e Bootstrap 4 e tenho muitas colunas na tabela. A solução para mim foi THadicionar um DIVelemento com uma largura específica. Por exemplo, para as colunas "Nome da pessoa" e "Data do evento", preciso de uma largura específica e, em seguida, coloque um divno cabeçalho da coluna; toda a largura da coluna será redimensionada para a largura especificada na div na 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> ...

-1

use .algo sem td ou 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>


-2

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


Adicione algumas explicações também.
Akash Dubey

Esta resposta é confusa na melhor das hipóteses. As aulas são estranhas, ids não essenciais, sem explicação.
GotBatteries
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.