Как вы изменяете свойство colspan при скрытии столбцов через CSS?

Я пытаюсь реализовать "the unseen column" responsive table technique, назначив класс определенному столбцу, который я могу скрыть, если браузер слишком узкий.Как вы изменяете свойство colspan при скрытии столбцов через CSS?

Усеченный фиктивная 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>

Это все хорошо и денди, за исключением того, есть один пиксел границы или пространство, остающийся на дальнем правом углу таблицы в некоторых браузерах, в частности Chrome 26. I» ve попытался настроить пограничный обвал и границу на многих элементах таблицы в запросе на медиа. Я также попытался установить отрицательные поля для учета пикселя. Будучи анально-ретентивным человеком, я не могу его отпустить, но я бы предпочел не использовать jQuery для решения этой проблемы.

Так как я могу объяснить недостающий столбец?

источник

2013-04-03 plntxt

Вы не можете изменить атрибут colspan из CSS. Если вам действительно нужно изменить значение, вам придется изменить 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;

Этот путь колонка будет по-прежнему существует для Colspan, хотя все не видно.

источник

2017-04-10 10:23:52 ruuter

Как вы изменяете свойство colspan при скрытии столбцов через CSS?

ответ

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