Как изменить свойство 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, в крайнем правом углу таблицы остается граница или пробел в один пиксель. медиа-запрос. Я также пытался установить отрицательные поля для учета пикселя. Будучи анальным человеком, я не могу отпустить это, но я бы предпочел не использовать jQuery для решения этой проблемы.

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


html css html-table media-queries
person personaelit    schedule 03.04.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы не можете изменить атрибут colspan из CSS. Если вам действительно нужно изменить значение, вам придется изменить DOM.

Однако вместо класса Title, который вы используете для охвата всех столбцов, вы можете использовать элемент <caption>, который делает именно то, что вы хотите. Фактически это название таблицы. См. http://www.quackit.com/html_5/tags/html_caption_tag.cfm

Вот модифицированная версия вашей разметки, в которой используется элемент заголовка. При изменении размера в Chrome он ведет себя так, как вам хотелось бы.

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;} 
          }
        <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>

person personaelit    schedule 03.04.2013

arrow_upward
4
arrow_downward

В случае, если у вас есть аналогичная проблема, но для colspan не расширяется вся строка, и в этом случае caption не имеет смысла.

Простой трюк состоит в том, чтобы не скрывать нужные столбцы с помощью display: none;, а делать

width: 0px;

Таким образом, столбец все еще будет существовать для colspan, хотя и не будет виден.

person ruuter    schedule 10.04.2017
comment
@HoldOffHunger После значения нулевой длины идентификатор модуля является необязательным. width: 0; отлично и более читабельно IMO. См.: stackoverflow.com/a/5359241/1296104 - person ruuter; 07.06.2018
comment
Вау, так красиво и просто, использование спасло мой день, спасибо! - person Baurzhan; 05.02.2019
comment
Вам также может понадобиться установить border-width: 0; и overflow: hidden; - person Dai; 30.10.2020