在不同行中顯示不同單元格寬度的表格

我如何通過不同行中的「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個單元格的最後一行是個好主意，但我寧願使用盡可能小的代碼的解決方案。附：請原諒我的英文，我用谷歌翻譯.. 感謝您的時間 – albsteen

相關問題