当上面的行使用rowspan时，隐藏第二列

Question

我有这张桌子

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th></th>
      <th>01/09/16</th>
      <th>02/09/16</th>
      <th>03/09/16</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" valign="top">In</th>
      <th></th>
      <td>Jack</td>
      <td>Jack</td>
      <td>James</td>
    </tr>
    <tr>
      <th></th>
      <td></td>
      <td>Lisa</td>
      <td>Jack</td>
    </tr>
  </tbody>
</table>

它像这样呈现

我想摆脱标题的空白列。

我尝试过使用这个css

'th:nth-of-type(2) {display: none;}'

我得到了这个

rowspan让我失望。我愿意使用聪明的regex替换或css。

Answer 1

让我们对它感到奇怪。我认为:empty pseudo selector可能就是你想要的。我不知道你的全表结构有多么不同，但这应该让你走上正确的道路。

为了便于阅读，我将tr > th:empty:nth-child(2){display: none;} tr > td:empty:nth-child(2){display: none;}放在两行上。您可以按照自己的意愿进行组合。

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th></th>
      <th>01/09/16</th>
      <th>02/09/16</th>
      <th>03/09/16</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" valign="top">In</th>
      <th></th>
      <td>Jack</td>
      <td>Jack</td>
      <td>James</td>
    </tr>
    <tr>
      <th></th>
      <td></td>
      <td>Lisa</td>
      <td>Jack</td>
    </tr>
  </tbody>
</table>

    // Create your new Intent
    Intent intent = new Intent(activity,UserAdsView.class);
    //create a bundle
    Bundle b = new Bundle();
    //when you add a list of objects (JSON or Otherwise), use a serializer
    b.putSerializable("passed_data", passing_data);

    intent.putExtras(b);
    startActivity(intent);

Answer 2

以下是使用jquery执行此操作的一种方法。这会使每个<th>找到rowspan属性，并隐藏任何立即进行的列。

＆＃13;

＆＃13;

$("table.dataframe").find("th[rowspan]").each(function() {
    var index = $(this).index() + 2;
    $(this).closest("table.dataframe").find('th,td').filter(":nth-child("+index+")").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th></th>
      <th>01/09/16</th>
      <th>02/09/16</th>
      <th>03/09/16</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" valign="top">In</th>
      <th></th>
      <td>Jack</td>
      <td>Jack</td>
      <td>James</td>
    </tr>
    <tr>
      <th></th>
      <td></td>
      <td>Lisa</td>
      <td>Jack</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以通过给出tds和ths边框然后将第一个col边框设置为0或none来实现这一点，但你必须省略或将表格边框设置为0：

     table {
          border-collapse: collapse;
        }
        table th, td {
          border: 1px solid #000;
        }
        
        table th.no-border {
          border: none;
        }

        <table class="dataframe">
          <thead>
            <tr style="text-align: right;">
              <th class="no-border"></th>
              <th></th>
              <th>01/09/16</th>
              <th>02/09/16</th>
              <th>03/09/16</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th rowspan="2" valign="top">In</th>
              <th></th>
              <td>Jack</td>
              <td>Jack</td>
              <td>James</td>
            </tr>
            <tr>
              <th></th>
              <td></td>
              <td>Lisa</td>
              <td>Jack</td>
            </tr>
          </tbody>

Answer 4

我使用了css not选择器

th:nth-of-type(2), tbody th:not([rowspan]) {display: none;}

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th></th>
      <th>01/09/16</th>
      <th>02/09/16</th>
      <th>03/09/16</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" valign="top">In</th>
      <th></th>
      <td>Jack</td>
      <td>Jack</td>
      <td>James</td>
    </tr>
    <tr>
      <th></th>
      <td></td>
      <td>Lisa</td>
      <td>Jack</td>
    </tr>
  </tbody>
</table>

Answer 5

这个表数据动态吗？
假设这个表是固定的，javascript方式将是这样的

它检查你的第二列是否为空，然后删除每个表行的第二个元素

<script>
    var x = document.getElementsByTagName("th");
    var check = x[1].innerHTML;

    if(check == "") {
        var blk_0 = document.getElementsByTagName("tr")[0];
        var blk_1 = document.getElementsByTagName("tr")[1];
        var blk_2 = document.getElementsByTagName("tr")[2];
        blk_0.removeChild(blk_0.childNodes[3]);
        blk_1.removeChild(blk_1.childNodes[3]);
        blk_2.removeChild(blk_2.childNodes[1]);
    }
</script>

https://jsfiddle.net/3erhzcta/