Colspan da tabela de exibição css não funcionou [duplicado]

1
Shohel 2019-10-17 19:31.

Já cansei de consertar o colspan na tabela de exibição em CSS.

.table {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.table-row {
  display: table-row;
  border-collapse: collapse;
}

.table-cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

.table-row.colspan {
  display: block;
}
.table-row.colspan .table-cell {
  display: block;
  width: 200%;
  box-sizing: border-box;
}
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      top left cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
  </div>
</div>

Como posso obter o comportamento colspan da segunda linha da tabela? Desde já, obrigado.

https://codepen.io/mdshohelrana/pen/WNNxBqP

4 answers

3
RoToRa 2019-10-17 20:51.

O que você quer dizer com "comportamento colspan"?

Não é possível reproduzir o colspanatributo HTML em tabelas em CSS und display: table-*, porque é uma coisa estrutural, não uma coisa de estilo. Além disso, colspanrequer um parâmetro de número para determinar o número de colunas a serem abrangidas, o que você não tem.

O que você está tentando fazer? Se você quiser usar uma tabela (para dados tabulares), use elementos HTML table/ tr/ tde o atributo colspan.

Se você deseja ter um layout de tabela como (página), então você deve usar a grade css com a qual você pode fazer colspandesigns semelhantes.

Em qualquer caso, você não deve usar muitos divs e usar nomes de classe como table-row/celletc. Os nomes de classe devem descrever semanticamente o conteúdo, não a aparência dos elementos.

2
rey 2019-10-17 19:41.

O assunto foi discutido aqui

Não existe uma propriedade CSS simples que possamos fornecer para colspan (até onde eu sei). Acho que usar a tag de tabela é mais eficiente e compreensível.

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

https://www.w3schools.com/tags/att_td_colspan.asp Você pode consultar aqui.

1
Vinay Prajapati 2019-10-17 19:58.

Bem, você pode resolver isso por duas abordagens:

  1. Use display:table-row-groupe, em seguida, para especificar a célula display:table-caption. mas estou lutando para definir a borda do lado direito neste caso. O violino para o mesmo está abaixo:

http://jsfiddle.net/hsbokxv4/

  1. Você pode manipular usando javascript. Fiddle está abaixo (embora eu não seja fã dessa abordagem):

http://jsfiddle.net/emilianolch/5nvxv5ko/

1
Taha Paksu 2019-10-17 19:47.

Eu poderia simular um hack com a configuração de flutuação e largura. Talvez possa ser usado em seu projeto. Mas não tenho certeza se funcionará da mesma forma em todas as plataformas. Adicionar uma largura a toda a tabela e definir a largura do colspan igual à da tabela seria um pouco mais seguro para isso. Atualizado a resposta com a largura definida.

A parte importante para que a largura corresponda é a box-sizing: border-boxconfiguração. Como diferiria os intervalos entre duas células e uma célula em uma linha, isso deve ser definido.

.table {
  display: table;
  table-layout: fixed;
  width: 600px;
  border-collapse: collapse;
  box-sizing: border-box;
}

.table-row {
  display: table-row;
  border-collapse: collapse;
  box-sizing: border-box;
}

.table-row.colspanned
{
  float: left;
  margin: -1px 0;
  width: 600px;
}

.table-cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
  box-sizing: border-box;
}

.table-cell.colspan {
  margin-top: -1px;
  margin-bottom: -1px;  
  width: 200px !important;
}
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      top left cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
  </div>
  <div class="table-row colspanned">
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="table-cell colspan">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
  </div>
</div>

Related questions

MORE COOL STUFF

Cate Blanchett dormiu com o marido depois de 3 dias juntos e ainda está casada com ele 25 anos depois

Cate Blanchett dormiu com o marido depois de 3 dias juntos e ainda está casada com ele 25 anos depois

Cate Blanchett desafiou os conselhos típicos de namoro quando conheceu o marido.

Por que Michael Sheen é um ator sem fins lucrativos

Por que Michael Sheen é um ator sem fins lucrativos

Michael Sheen é um ator sem fins lucrativos, mas o que exatamente isso significa?

Hallmark Star Colin Egglesfield Pratos Emocionantes Encontros de Fãs no RomaDrama Live! [Exclusivo]

Hallmark Star Colin Egglesfield Pratos Emocionantes Encontros de Fãs no RomaDrama Live! [Exclusivo]

A estrela da Hallmark Colin Egglesfield falou sobre emocionantes encontros com fãs no RomaDrama Live! além de seu programa INSPIRE na convenção.

Por que você não pode transmitir 'Exposição do Norte' online

Por que você não pode transmitir 'Exposição do Norte' online

Você terá que tirar o pó de um Blu-ray ou DVD player para ver por que Northern Exposure se tornou um dos programas mais populares dos anos 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

Como a matéria branca ajuda a função da matéria cinzenta do cérebro

Como a matéria branca ajuda a função da matéria cinzenta do cérebro

Todos nós já ouvimos falar da massa cinzenta do cérebro, mas e a massa branca? O que isso faz?

Doe seu cabelo para ajudar a manter nossa água limpa

Doe seu cabelo para ajudar a manter nossa água limpa

Aparas de cabelo de salões e doações pessoais podem ser reaproveitadas como tapetes que absorvem derramamentos de óleo e ajudam a proteger o meio ambiente.

Um olhar sobre os casamentos mais memoráveis ​​da Casa Branca

Um olhar sobre os casamentos mais memoráveis ​​da Casa Branca

Apenas algumas pessoas se casaram na Casa Branca nos últimos 200 anos. Quem eram eles e o que é necessário para marcar um casamento lá?

Esta semana no mercado de trabalho: a verdade na publicidade

Esta semana no mercado de trabalho: a verdade na publicidade

CITAÇÃO | “Recebemos mais de dois milhões de visitantes únicos neste stream para assistir, não sei o quê, nada.” - Todd Howard da Bethesda Game Studios descreve a transmissão ao vivo de 24 horas da empresa de uma estátua do Vault Boy e uma TV com um gráfico “Please Stand By” levando à revelação do teaser Fallout 76.

Wall Street Journal se preocupa com o fato de que profissionais do sexo "ilícitas" prejudicam sites de namoro de milhões de dólares

Wall Street Journal se preocupa com o fato de que profissionais do sexo "ilícitas" prejudicam sites de namoro de milhões de dólares

O Wall Street Journal de hoje tem um artigo sobre o impacto potencialmente negativo da nova lei “anti-tráfico” do nosso país - não sobre as trabalhadoras do sexo, veja bem, mas sobre o grande negócio do namoro online. Sim, a Lei de Permitir que Estados e Vítimas Combatam o Tráfico de Sexo Online (FOSTA) está colocando em risco a subsistência e a vida de profissionais do sexo - mas, ah, alguém não pensará nas empresas multimilionárias? Como o artigo adverte seus leitores conservadores e preocupados com o dinheiro, “O negócio florescente de namoro online enfrenta novos riscos de uma lei projetada para prevenir o tráfico sexual e a prostituição.

O cantor Scott Hutchison do Frightened Rabbit desapareceu

O cantor Scott Hutchison do Frightened Rabbit desapareceu

Scott Hutchison, vocalista da banda indie escocesa Frightened Rabbit, foi relatado como desaparecido por sua família. A BBC relata que ele está atualmente em Edimburgo e a polícia está chegando ao público para obter qualquer informação sobre sua localização.

Me chame de 'Mestre': Ex diz que o ex-procurador-geral de Nova York estava interessado em interpretar papéis racistas durante o sexo

Me chame de 'Mestre': Ex diz que o ex-procurador-geral de Nova York estava interessado em interpretar papéis racistas durante o sexo

O agora ex-procurador-geral de Nova York Eric Schneiderman em 2017 Na segunda-feira, o New Yorker publicou uma exposição de mais de 6.000 palavras sobre o agora ex-procurador-geral de Nova York Eric Schneiderman, na qual pelo menos quatro mulheres em relacionamentos anteriores com ele acusaram a operadora democrata de abuso físico, sexual, verbal e emocional. Horas depois, Schneiderman negou as acusações, mas renunciou ao cargo.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Carne de porco Mapo de Dawn Burrell e homus de Edamame

Carne de porco Mapo de Dawn Burrell e homus de Edamame

"Esta é uma indústria dominada por homens, e estou feliz por ser uma das pessoas que quebrou o molde para ajudar as mulheres de cor", diz Top Chef: finalista de Portland e chef-parceiro do final de agosto em Houston. "Muitas vezes somos ignorados e às vezes não ensinados, mas isso vai mudar."

Kate Middleton passa um dia à beira da água em Londres, além de Jennifer Lopez, Julianne Hough e mais

Kate Middleton passa um dia à beira da água em Londres, além de Jennifer Lopez, Julianne Hough e mais

Kate Middleton passa um dia na água em Londres, além de Jennifer Lopez, Julianne Hough e muito mais. De Hollywood a Nova York e em todos os lugares, veja o que suas estrelas favoritas estão fazendo!

Jovem de 17 anos esfaqueado até a morte enquanto outros 4 ficaram feridos em um ataque de faca no rio Wisconsin

Jovem de 17 anos esfaqueado até a morte enquanto outros 4 ficaram feridos em um ataque de faca no rio Wisconsin

Investigadores estão investigando se o grupo e o suspeito se conheciam antes do ataque

Aterrissagens na pista

Aterrissagens na pista

O final do verão e o outono são estações nostálgicas. Os postes de luz lançam sua luz sobre as ruas escorregadias pela chuva, e as folhas sob os pés – vermelho-alaranjado nas sombras do crepúsculo – são um lembrete de dias passados.

Imagine criar uma estratégia de conteúdo que realmente CONVERTE. É possível.

Imagine criar uma estratégia de conteúdo que realmente CONVERTE. É possível.

Em 2021, encorajo você a repensar tudo o que sabe sobre os clientes que atende e as histórias que conta a eles. Dê um passo para trás.

Uma perda gigantesca abriu meu coração para o amor

Uma perda gigantesca abriu meu coração para o amor

No dia do aniversário de 9 anos de Felix The Cat, lembro-me de uma das maiores perdas da minha vida adulta – minha Sophie em 2013. Escrevi este ensaio e o compartilhei brevemente nesta plataforma em 2013.

Quando você não pode ser a pessoa que a internet quer que você seja

Quando você não pode ser a pessoa que a internet quer que você seja

Odeio a palavra “naufrágio”. As pessoas se confortam em sua própria bússola moral e, ao fazê-lo, encontram-se julgando.

Language