如何通过CSS隐藏列时修改colspan属性？

Question

如何通过CSS隐藏列时修改colspan属性？

pln*_*txt 3 html css html-table media-queries

我试图通过将类分配给特定列来实现"看不见的列"响应表技术,如果浏览器太窄,我可以隐藏它.

截断的伪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>

Run Code Online (Sandbox Code Playgroud)

除了在某些浏览器的桌子最右边有一个像素边框或空间,特别是Chrome 26之外,这一切都很精致和花花公子.我已经尝试调整边框折叠和边框上的许多表格元素媒体查询.我也尝试设置负边距来计算像素.作为我的肛门保持者,我不能放手,但我宁愿不使用jQuery来解决这个问题.

那么如何解释缺失的列？

Answer 1

pln*_*txt 5

您无法从CSS修改colspan属性.如果您确实需要更改值,则必须修改DOM.

但是,您可以使用一个<caption>完全符合您要求的元素,而不是您用来包含所有列的"Title"类.它实际上是表格的标题.请参阅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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

ruu*_*ter 5

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

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

width: 0px;

Run Code Online (Sandbox Code Playgroud)

这样，列对于 colspan 仍然存在，尽管不可见。

归档时间：	13 年，5 月前
查看次数：	5570 次
最近记录：	8 年，3 月前