Forçar um estrutura tabular...

[Bruno Augusto 417]

Eu sei, eu sei, se estou usando tabelas para exibir dados não-tabulares, estou fazendo isso errado mas a meu favor tenho a desculpa de que não sou eu que estou gerando o HTML e sim uma ferramenta automática de documentação de software (Doxygen, para os curiosos).

 

A estrutura se refere à lista de parâmetros dos métodos de uma classe:

 

<div class="memproto">
     <table class="memname">
       <tr>
         <td class="memname">XML\Writer::addChild </td>
         <td>(</td>
         <td class="paramtype"> </td>
         <td class="paramname"><em>$name</em>, </td>
       </tr>
       <tr>
         <td class="paramkey"></td>
         <td></td>
         <td class="paramtype"> </td>
         <td class="paramname"><em>$value</em> = <code>NULL</code>, </td>
       </tr>
       <tr>
         <td class="paramkey"></td>
         <td></td>
         <td class="paramtype">array </td>
         <td class="paramname"><em>$attributes</em> = <code>array()</code>, </td>
       </tr>
       <tr>
         <td class="paramkey"></td>
         <td></td>
         <td class="paramtype"> </td>
         <td class="paramname"><em>$close</em> = <code>FALSE</code> </td>
       </tr>
       <tr>
         <td></td>
         <td>)</td>
         <td></td><td></td>
       </tr>
     </table>
</div>

E o output sai assim:

 

Imaginando ser só uma questão de um display: inline procurei no arquivo CSS a definição .memname e só encontrei duas ocorrências:

 

.memname {
       font-weight: bold;
       margin-left: 6px;
}

.memname td {
vertical-align: bottom;
}

Inseri o display na segunda e ficou assim:

 

Logo vi que não é apenas isso.

 

É possível "hackear" o CSS de uma tabela para fazer tal informação ficar inline (ao invés de um por linha) como se ao invés de <td>'s fosse uma lista à qual pode-se aplicar a mesma técnica de menus horizontais?

[JCMais 75]

Bom, você não postou um link para testar, então peguei uma API que conheço que usa Doxygen, portanto a estrutura pode ser diferente, mas consegui o que você quer usando o seguinte CSS:

.mdRow tr {display:inline;}

.mdRow .mdname {width: auto;}

 

Resultado:

 

Documentação que usei para testar :seta: http://phplibex.sourceforge.net/classbbcode.html#a0

[Bruno Augusto 417]

Cara, não rolou não porque a estrutura das duas documentações são diferentes.

 

Eu estou com a versão mais recente do Doxygen e essa biblioteca na qual você se baseou é de uma versão bem antiga e consequentemente bem diferente.

 

E nem tem como eu postar um link de teste, pelo menos eu acho que não conseguiria extrair um código útil do bolo que é esse HTML.

 

Dá pra fazer sobre a marcação que eu passei?

[JCMais 75]

Olhando assim por cima fica dificil dizer, apenas testando.

 

Usa o firebug e vai testando aplicar display:inline; para cada tr filho de .memname e vê o que acontece.

[Bruno Augusto 417]

Bom, com essa dica consegui alinhar, bastou um float: left em .memname tr

 

Mas ainda não ficou exatamente como eu quero. De repente dá pra arrumar via CSS.

 

Existem alguns <td>'s vazios nessa estrutura, referentes aos tipos dos argumentos. Porém, pela imagem da pra ver que nem sempre haverá um tipo. Mas o Doxygen inclui a tag mesmo assim.

 

É possível, através de algum seletor (que eu não conheço) alcançar esses <td> vazios e, não sei, remover sua largura ou negativar sua margem, enfim, alguma coisa que depois de feita faça com que os símbolos de cifrão do <td> à frente sejam literalmente puxados para a esquerda, como se o <td> que quero alcançar sequer existisse?

[JCMais 75]

Seria possível usando CSS3:

.paramtype:empty + .paramname {
   margin-left: -Xpx;
   /* ... */
}

 

Caso não tivesse espaços dentro do td, o que, conforme a imagem, não é o seu caso.

[Bruno Augusto 417]

Como você disse que poderia ser possível, antes de experimentar no CSS real eu fiz via Inspetor de Elementos que dispensa o seletor e nem assim funcionou.

 

Cheguei até a colocar, mesmo que de brincadeira, -600px de margem e a <td> nem se mexeu (eu coloquei uma borda para ver).