larguras td, não está funcionando?

93

Portanto, tenho este código aqui:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

com o CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Ele funciona bem no meu navegador e eu testei em todos os navegadores Mac e PC, mas alguém está reclamando que tdo widthde 200 fica mudando de largura. Não tenho ideia do que ele está falando. Alguém sabe por que ele ou ela está vendo a mudança de largura no td?

user979331
fonte
Então, como podemos ajudar quando temos ainda menos ideia do que é a reclamação? Não podemos nem mesmo testar a página real, e não temos informações sobre a pessoa e seu ambiente de navegação.
Jukka K. Korpela de

Respostas:

122

Deveria ser:

<td width="200">

ou

<td style="width: 200px">

Observe que se sua célula contém algum conteúdo que não se encaixa nos 200px (como somelongwordwithoutanyspaces), a célula se estenderá, a menos que seu CSS contenha table-layout: fixedpara a tabela.

EDITAR

Como kristina childs observou em sua resposta, você deve evitar o widthatributo e usar CSS inline (com o styleatributo). É uma boa prática separar estilo e estrutura tanto quanto possível.

bfavaretto
fonte
Obrigado bfavaretto ... tentando isso agora
user979331
47
a tabela deve ser<table style="table-layout:fixed;">
user979331
3
@ user1193385, Sim, é isso. Mas evite usar css inline, se possível.
bfavaretto de
4
css inline é uma má ideia, a menos que você realmente só precise dele em um lugar. além disso, a largura td foi depreciada por algum tempo. veja a resposta abaixo
kristina childs
2
@kristinachilds eu concordo. Usei css embutido no meu exemplo, então não precisaria dividir em dois blocos de código para HTML e CSS. Adicionado um comentário acima informando ao OP para evitar CSS embutido. Sobre o atributo largura, tecnicamente ele não está obsoleto (já que a especificação HTML5 ainda é um rascunho de trabalho), mas você está certo, deve ser evitado. Vou editar minha resposta com uma nota sobre isso.
bfavaretto
30

A largura e / ou altura nas tabelas não são mais padrão; como diz Ianzz, eles estão obsoletos. Em vez disso, a melhor maneira de fazer isso é ter um elemento de bloco dentro da célula da tabela que manterá a célula aberta no tamanho desejado:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}
Kristina Childs
fonte
10
Infelizmente, a tecnologia de e-mail está muitos anos atrás da especificação HTML atual e, nesse caso, tabelas e css embutidos são, infelizmente, inevitáveis.
MikeTheLiar
2
Ninguém estava falando sobre e-mails html, isso era para navegação básica na web em desktop. Mas sim, para e-mails, tabelas e css embutidos são a única maneira de criá-los. Obrigado, Microsoft ...
kristina childs
3
Só abro e-mail porque foi isso que me trouxe aqui; Eu estava tendo o mesmo problema com o e-mail.
MikeTheLiar
20
 <table style="table-layout:fixed;">

Isso forçará a largura estilizada <td>. Se o texto o sobrecarregar, ele se sobreporá ao outro <td>texto. Portanto, tente usar consultas de mídia.

mateostabio
fonte
1
No meu caso de uso, isso foi tão importante quanto a resposta de
bfavaretto
No meu caso (Firefox 70.0), table-layout:fixedatribuí larguras fixas às colunas, então não posso mudar widthmais (com jquery).
Jose Manuel Abarca Rodríguez
7

Você não pode especificar unidades em width/ heightatributos de uma tabela; eles estão sempre em pixels, mas você não deve usá-los, pois estão obsoletos.

Lanzz
fonte
7

Você pode usar no <td>tag css:display:inline-block

Gostar: <td style="display:inline-block">

Siddharth Shukla
fonte
2

tente usar

word-wrap: break-word;

espero que esta ajuda

Med7at
fonte
1

tente isto:

word-break: break-all;
Masoud HB
fonte
1

Usar

<table style="table-layout:fixed;">

Isso forçará a tabela a ser definida como 100% de largura. Em seguida, use este código

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(o id da tabela é dataTable e tem 3 colunas) para especificar o comprimento de cada célula

Amrit Anand
fonte
0

Observe que ajustar a largura de uma coluna no cabeçalho afetará toda a tabela

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>[email protected]</td>
    </tr>
</table>

No meu caso, a largura no fio> tr estava substituindo a largura na mesa> tr> td diretamente.

Nick Woodhams
fonte
0

Eu tentei com muitas soluções, mas não funcionou para mim, então tentei flexionar com a mesa e funcionou bem para mim com todas as funcionalidades da mesa, como colapso de borda e assim por diante, apenas a alteração é propriedade de exibição

Este era meu requisito de HTML

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

Meu CSS

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}
Mohammed Yousuff
fonte
0

Este problema é facilmente resolvido usando min-widthe max-widthdentro de uma regra css.

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

Isso forçará a primeira coluna a ter 80 pixels de largura. Normalmente, eu só uso max-width sem min-width para reinar em texto que é muito ocasionalmente longo de criar uma tabela que tem uma coluna superlarga que está quase vazia. A questão do OP era sobre definir uma largura fixa, portanto, as duas regras juntas. Em muitos navegadores width:80px;, o CSS é ignorado nas colunas da tabela. Definir a largura dentro do HTML funciona, mas não é a maneira como você deve fazer as coisas.

Eu recomendaria usar regras de largura mínima e máxima, e não defini-las iguais, mas sim definir um intervalo. Dessa forma, a tabela pode fazer isso, mas você pode dar algumas dicas sobre o que fazer com conteúdo excessivamente longo.

Se eu quiser evitar que o texto se enrole e aumente a altura de uma linha - mas ainda possibilito que um usuário veja o texto completo, eu uso white-space: nowrap;na regra principal e, em seguida, aplico uma regra de foco que remove as regras de largura e agora para que o usuário possa ver o conteúdo completo ao passar o mouse sobre ele. Algo assim:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

Depende exatamente do que você está tentando alcançar. Espero que isso ajude alguém. PS Como um aparte, para iOS há uma correção para o hover não funcionar - consulte CSS Hover não funciona no iOS Safari e Chrome

SOKitsune
fonte