如何通過CSS隱藏列時修改colspan屬性？

我試圖實現"the unseen column" responsive table technique通過分配一個類到我可以隱藏的特定列，如果瀏覽器太窄。如何通過CSS隱藏列時修改colspan屬性？

截斷虛擬HTML例如：

<!doctype html> 
<html> 
    <head> 
    <style> 
     table { 
      width:100%; 
      background-color:#000; 
      border-spacing: 1px; 
     } 

     table tr { 
      background-color:#fff; 
     } 

     table tr:nth-child(2n+1) { 
      background-color: #ccc; 
     } 

     table tr.Title 
     { 
     color:#fff; 
     background-color:#0e228c; 

     } 

     table tr.ColumnHeadings 
     { 
     background-color:#e4e0d4; 

     } 

     @media only screen and (max-width: 1024px) { 
      .VolumeCell {display:none;} 
     } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr class="Title"> 
     <th colspan="6">Stock Prices</th> 
     </tr> 
     <tr class="ColumnHeadings"> 
     <th>Code</th> 
     <th>Company</th> 
     <th>Price</th> 
     <th>Change</th> 
     <th>Change %</th> 
     <th class="VolumeCell">Volume</th> 
     </tr> 
     <tr> 
     <td>AAC</td> 
     <td>Austrailian Agricultural Company Ltd</td> 
     <td>$1.39</td> 
     <td>-0.01 </td> 
     <td>-0.36%</td> 
     <td class="VolumeCell">9,395</td> 
     </tr> 
     <tr> 
     <td>AAD</td> 
     <td>Ardent Liesure Grp.</td> 
     <td>$1.15</td> 
     <td>+0.02 </td> 
     <td>1.32%</td> 
     <td class="VolumeCell">56,431</td> 
     </tr> 
     <tr> 
     <td>AAX</td> 
     <td>Ausenco Ltd.</td> 
     <td>$4.00</td> 
     <td>-0.04 </td> 
     <td>-.99%</td> 
     <td class="VolumeCell">90,641</td> 
     </tr> 
    </table> 
    </body> 
</html>

這是所有罰款和花花公子，除了有單個像素邊框或空間在某些瀏覽器留在最右邊的表，特別是鉻26.我」我試圖調整邊界摺疊並在媒體查詢中的許多表格元素上邊界。我也嘗試設置負邊距來說明像素。作爲保留肛門的人，我不能放過它，但我寧願不使用jQuery來解決這個問題。

那麼如何解釋缺失的列呢？

來源

2013-04-03 plntxt

您不能從CSS修改colspan屬性。如果您確實需要更改該值，則必須修改DOM。

然而，不是你正在使用涵蓋所有列在「標題」類，你可以使用一個<caption>元素這不正是你想要的東西。它實際上是表格的標題。見http://www.quackit.com/html_5/tags/html_caption_tag.cfm

下面是一個使用標題元素您的標記的修改版本。在Chrome中調整大小後，它的行爲將會如何。

<!doctype html> 
<html> 
    <head> 
    <style> 
     table { 
      width:100%; 
      background-color:#000; 
      border-spacing: 1px; 
     } 

     table tr { 
      background-color:#fff; 
     } 

     table tr:nth-child(2n+1) { 
      background-color: #ccc; 
     } 

     caption 
     { 
     color:#fff; 
     background-color:#0e228c; 

     } 

     table tr.ColumnHeadings 
     { 
     background-color:#e4e0d4; 

     } 

     @media screen and (max-width: 1024px) { 
      .VolumeCell {display:none;} 
     } 
    </style> 
    </head> 
    <body> 
    <table> 
     <caption> 
     Stock Prices 
     </caption> 
     <tr class="ColumnHeadings"> 
     <th>Code</th> 
     <th>Company</th> 
     <th>Price</th> 
     <th>Change</th> 
     <th>Change %</th> 
     <th class="VolumeCell">Volume</th> 
     </tr> 
     <tr> 
     <td>AAC</td> 
     <td>Austrailian Agricultural Company Ltd</td> 
     <td>$1.39</td> 
     <td>-0.01 </td> 
     <td>-0.36%</td> 
     <td class="VolumeCell">9,395</td> 
     </tr> 
     <tr> 
     <td>AAD</td> 
     <td>Ardent Liesure Grp.</td> 
     <td>$1.15</td> 
     <td>+0.02 </td> 
     <td>1.32%</td> 
     <td class="VolumeCell">56,431</td> 
     </tr> 
     <tr> 
     <td>AAX</td> 
     <td>Ausenco Ltd.</td> 
     <td>$4.00</td> 
     <td>-0.04 </td> 
     <td>-.99%</td> 
     <td class="VolumeCell">90,641</td> 
     </tr> 
    </table> 
    </body> 
</html>

來源

2013-04-03 19:38:02 plntxt

如果一個有類似的問題，但對於colspan不擴大整行，在這種情況下caption是沒有意義的。

一個簡單的竅門是不能掩蓋所需的列與display: none;，而是做

width: 0;

這樣列將仍然存在合併單元格，一切雖眼不能見。

來源

2017-04-10 10:23:52 ruuter

如何通過CSS隱藏列時修改colspan屬性？

回答

相關問題