3

ブラウザーが狭すぎる場合に非表示にできる特定の列にクラスを割り当てることにより、「見えない列」レスポンシブ テーブル手法を実装しようとしています。

切り捨てられたダミー 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 でテーブルの右端に 1 ピクセルの境界線またはスペースが残っていることを除いて、すべて問題なくダンディです。メディアクエリ。また、ピクセルを考慮して負のマージンを設定しようとしました。私は肛門保持者であるため、手放すことはできませんが、この問題を解決するためにjQueryを使用したくない.

では、欠落している列をどのように説明できますか?

4

2 に答える 2

5

CSS から colspan 属性を変更することはできません。本当に値を変更する必要がある場合は、DOM を変更する必要があります。

ただし、すべての列を網羅するために使用している "Title" クラスの代わりに、必要なこと<caption>を正確に実行する要素を使用できます。これは事実上、テーブルのタイトルです。http://www.quackit.com/html_5/tags/html_caption_tag.cfmを参照してください。

これは、caption 要素を使用するマークアップの修正版です。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>

于 2013-04-03T19:38:02.683 に答える