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。我尝试调整许多表格元素的边框折叠和边框媒体查询。我还尝试设置负边距来考虑像素。作为一个固执肛门的人，我不能放手，但我宁愿不使用 jQuery 来解决这个问题。

那么我该如何解释缺失的列呢？

4

2 回答 2

5

您不能从 CSS 修改 colspan 属性。如果您确实需要更改该值，则必须修改 DOM。

但是，您可以使用一个<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>

于 2013-04-03T19:38:02.683 回答
4

万一有类似的问题，但colspan不扩展整行，在这种情况下caption是没有意义的。

一个简单的技巧是不要隐藏所需的列display: none;，而是

width: 0px;

这样一来，colspan 的列仍然存在，尽管不可见。

于 2017-04-10T10:23:52.483 回答