css - 如何编辑表格列和行？

Question

我有一个表格(下面的 codepen 链接)，我正在努力使“治疗”和“价格”标题直接放在“一”和“百万英镑”列的上方，只占用一行，留下两个空白 td或以上。现在他们占据了 2 行，背景是灰色的。我想我可以在透明背景的“治疗”和“价格”上方添加 2 个空白？我希望我在这里是有道理的...

<table class="priceList">   
        <thead>
            <tr>
                <th rowspan="2">Treatment</th>
                <th rowspan="2">Price</th>
                <th colspan="3">Inclusive Packages*</th>
            </tr>
            <tr>
                <th>6</th>
                <th>8</th>
                <th>10</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>One</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
            <tr>
                <td>Two</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
            <tr>
                <td>Three</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
            <tr>
                <td>Four</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
            <tr>
                <td>Five</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
            <tr>
                <td>Six</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
            <tr>
                <td>Seven</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
            <tr>
                <td>Eight</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
            <tr>
                <td>Nine</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
                <td>£million</td>
            </tr>
        </tbody>
    </table>

CSS

table.priceList {
  background: #f5f5f5;
  border-collapse: separate;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 24px;
  margin: 30px auto;
  text-align: left;
  width: 100%;
}


table.priceList td {
  white-space: nowrap;
  border-style: none solid; 
  vertical-align: top;
  border-right: 1px solid #fff;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 15px;
  position: relative;
  transition: all 300ms;
}

table.priceList th {
  background: url(http://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
  border-left: 1px solid #555;
  border-right: 1px solid #777;
  border-top: 1px solid #555;
  border-bottom: 1px solid #333;
  box-shadow: inset 0 1px 0 #999;
  color: #fff;
  font-weight: bold;
  padding: 10px 15px;
  position: relative;
  text-shadow: 0 1px 0 #000;
}

table.priceList th.one,
table.priceList th.two {}

table.priceList th:after {
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
  content: '';
  display: block;
  height: 25%;
  left: 0;
  margin: 1px 0 0 0;
  position: absolute;
  top: 25%;
  width: 100%;
}

table.priceList th:first-child {
  border-left: 1px solid #777;  
  box-shadow: inset 1px 1px 0 #999
}

table.priceList th:last-child {
  box-shadow: inset -1px 1px 0 #999;
}

table.priceList td:first-child {
  box-shadow: inset 1px 0 0 #fff;
} 

table.priceList td:last-child {
  border-right: 1px solid #e8e8e8;
  box-shadow: inset -1px 0 0 #fff;
}

table.priceList tr {
  background: url(http://jackrugile.com/images/misc/noise-diagonal.png);
}

table.priceList tr:nth-child(odd) td {
  background: #f1f1f1 url(http://jackrugile.com/images/misc/noise-diagonal.png);  
}

table.priceList tr:last-of-type td {
  box-shadow: inset 0 -1px 0 #fff; 
}

table.priceList tr:last-of-type td:first-child {
  box-shadow: inset 1px -1px 0 #fff;
} 

table.priceList tr:last-of-type td:last-child {
  box-shadow: inset -1px -1px 0 #fff;
} 

tbody:hover td {
  color: transparent;
  text-shadow: 0 0 3px #aaa;
}

tbody:hover tr:hover td {
  color: #444;
  text-shadow: 0 1px 0 #fff;
}

代码笔在这里:http://codepen.io/doolz77/full/unFqD

Answer 1

创建 2 个空表标题，然后隐藏它们。

HTML

<thead>
    <tr>
        <th class="empty"></th>
        <th class="empty"></th>
        <th colspan="3">Inclusive Packages*</th>
    </tr>
    <tr>
        <th rowspan="2">Treatment</th>
        <th rowspan="2">Price</th>
        <th>6</th>
        <th>8</th>
        <th>10</th>
    </tr>
</thead>

CSS

.empty {
  visibility: hidden;
}

http://codepen.io/anon/pen/uKqlB