Таблица отображения с различной шириной ячейки в разных строках

Как я могу настроить это несоосность с помощью «display: table» в разных строках? Я делаю это для равной высоты в каждой строке без функции jquery. Ширина известково и отрицательный Margis для расстояния между границами и пограничного коллапсаТаблица отображения с различной шириной ячейки в разных строках

misalignment

Код:

* { 
 
    font-family: "Trebuchet MS", Arial, Sans-Serif; 
 
    outline: none; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: rgba(221, 221, 221, 1); 
 
} 
 
/* LIMITAZIONE: Per evitare di fare comparire lo scorrimento orizzontale sono necessari margini dx/sx la cui somma è uguale/maggiore dei pixel aggiunti al width della tabella */ 
 

 
.tableswrapper { 
 
    margin-top: 0; 
 
    margin-right: 1%; 
 
    margin-bottom: 0; 
 
    margin-left: 1%; 
 
    padding: 0; 
 
    background-color: rgba(255, 0, 0, 1); 
 
} 
 
.tableswrapper div.table { 
 
    width: calc(100% + 40px); 
 
    display: table; 
 
    border-collapse: separate; 
 
    border-spacing: 20px 0; 
 
    margin-bottom: 20px; 
 
    margin-left: -20px; 
 
    padding: 0; 
 
} 
 
.tableswrapper div.table:last-child { 
 
    margin-bottom: 0; 
 
} 
 
.tableswrapper div.table div.row { 
 
    display: table-row; 
 
} 
 
.tableswrapper div.table div.row div[class^='cellwidth'] { 
 
    display: table-cell; 
 
    empty-cells: hide; 
 
    padding: 0; 
 
    vertical-align: top; 
 
    background-color: rgba(255, 255, 255, 1); 
 
} 
 
.tableswrapper div.table div.row div[class^='cellwidth']:first-child {} .tableswrapper div.table div.row div[class^='cellwidth']:last-child {} .tableswrapper div.table div.row div.cellwidth1 { 
 
    width: 1%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth2 { 
 
    width: 2%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth3 { 
 
    width: 3%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth4 { 
 
    width: 4%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth5 { 
 
    width: 5%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth6 { 
 
    width: 6%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth7 { 
 
    width: 7%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth8 { 
 
    width: 8%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth9 { 
 
    width: 9%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth10 { 
 
    width: 10%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth15 { 
 
    width: 15%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth20 { 
 
    width: 20%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth25 { 
 
    width: 25%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth30 { 
 
    width: 30%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth33 { 
 
    width: 33.3333333333%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth35 { 
 
    width: 35%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth40 { 
 
    width: 40%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth45 { 
 
    width: 45%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth50 { 
 
    width: 50%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth55 { 
 
    width: 55%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth60 { 
 
    width: 60%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth65 { 
 
    width: 65%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth66 { 
 
    width: 66.6666666666%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth70 { 
 
    width: 70%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth75 { 
 
    width: 75%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth80 { 
 
    width: 80%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth85 { 
 
    width: 85%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth90 { 
 
    width: 90%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth95 { 
 
    width: 95%; 
 
} 
 
.tableswrapper div.table div.row div.cellwidth100 { 
 
    width: 100%; 
 
} 
 
/* TRICK: abilitare se si desiderano larghezze di colonna uguali sulla riga*/ 
 

 
/* 
 
\t \t .tableswrapper div.table {table-layout:fixed;} 
 
\t \t .tableswrapper div.table div.row div[class^='cellwidth'] {min-width:1%;width:1%;max-width:1%;} 
 
\t \t */ 
 

 
/* LIMITAZIONE: Le colonne all'interno di ogni riga che hanno un'immagine di testata devono avere la stessa larghezza */ 
 

 
.tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-bottom: 50%; 
 
} 
 
.tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage img { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
} 
 
.tableswrapper div.table div.row div[class^='cellwidth'] div.cellcontents { 
 
    margin: 0; 
 
    padding: 20px; 
 
} 
 
/*.tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage + div.cellcontents {padding-top:20px;}*/ 
 

 
.tableswrapper div.table div.row div[class^='cellwidth'] div.cellcontents h1.celltitle { 
 
    margin: 0; 
 
    padding: 0; 
 
    color: red; 
 
    font-size: 150%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head></head> 
 

 
<body> 
 

 
    <div class="tableswrapper"> 
 

 
    <div class="table"> 
 
     <div class="row"> 
 
     <div class="cellwidth100"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 100%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="table"> 
 
     <div class="row"> 
 
     <div class="cellwidth30"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 30%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth70"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 70%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="table"> 
 
     <div class="row"> 
 
     <div class="cellwidth30"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 30%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth40"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 40%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth30"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 30%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="table"> 
 
     <div class="row"> 
 
     <div class="cellwidth100"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 100%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="table"> 
 
     <div class="row"> 
 
     <div class="cellwidth25"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth50"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth25"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="table"> 
 
     <div class="row"> 
 
     <div class="cellwidth25"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth50"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 50%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth25"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="table"> 
 
     <div class="row"> 
 
     <div class="cellwidth25"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth25"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth25"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     <div class="cellwidth25"> 
 
      <div class="cellcontents"> 
 
      <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

источник

2016-07-11 albsteen

Если это таблица, то почему бы не использовать таблицы (

)? – Volvox

Для гибкой компоновки. Хотя я использую таблицы, существует несоосность – albsteen

Вы пытались использовать 'table-layout: fixed'? –

ответ

Здесь решение, использующее <table> и colspan атрибут.

Это работает, потому что:

ширина таблицы явно объявлен как 100%; и
есть строка (для шкалы) в нижней части, который содержит 100 клеток

Все остальные ячейки в таблице, то может объявить его правильную относительную ширину с помощью атрибута colspan.

table { 
 
width: 100%; 
 
border-collapse: collapse; 
 
font-family: trebuchet ms, arial, sans-serif; 
 
} 
 

 
td { 
 
border:18px solid rgb(255,0,0); 
 
padding: 0 12px; 
 
} 
 

 
tr.scale td { 
 
border: none; 
 
padding: 0; 
 
} 
 

 
h2 { 
 
color: rgb(255,0,0); 
 
}

<table> 
 
<tr> 
 
<td colspan="100"> 
 
<h2>Cell title 100%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td colspan="30"> 
 
<h2>Cell title 30%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="70"> 
 
<h2>Cell title 70%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td colspan="30"> 
 
<h2>Cell title 30%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="40"> 
 
<h2>Cell title 40%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="30"> 
 
<h2>Cell title 30%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td colspan="100"> 
 
<h2>Cell title 100%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="50"> 
 
<h2>Cell title 50%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 

 
<td colspan="25"> 
 
<h2>Cell title 25%</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</td> 
 
</tr> 
 

 
<tr class="scale"> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
</tr> 
 
</table>

источник

2016-07-11 09:09:22 Rounin

Спасибо, но решение не та, которую я искал .. и отзывчивый макет очень сложный для адаптации. – albsteen

Вы уверены, что вышеприведенное решение не отвечает требованиям? Я просто посмотрел на него на мобильном телефоне - он выглядит вполне отзывчивым. Можете ли вы указать, что, по вашему мнению, должно быть включено, но нет? Благодарю. – Rounin

Код, который я разместил, основан на «div». В мобильном режиме ваше решение адаптируется, но не реагирует. Последняя строка с 100 ячейками - хорошая идея, но я бы предпочел решение с наименьшим возможным кодом. Постскриптум извините мой английский, я использую google translate .. Спасибо за ваше время – albsteen

Смежные вопросы