如何编辑表格的列和行？答案

【问题标题】：How do I edit Table column and rows?如何编辑表格的列和行？
【发布时间】：2014-08-26 18:30:18
【问题描述】：

我有一张表格（下面的 codepen 链接），我正在尝试将其“治疗”和“价格”标题直接放在“一”和“百万英镑”列上方，仅占一行，留下两个空白 td或以上。现在它们占据了 2 行灰色背景。我想我可以在 'Treatment' 和 'Price' 上方添加 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;
}

codepen 在这里：http://codepen.io/doolz77/full/unFqD

【问题讨论】：

标签： css html html-table multiple-columns

【解决方案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

【讨论】：

你甚至可以删除 rowspan="2" 属性，我认为在这种情况下它们没有用。
你可以！诅咒你发现我的懒惰。我会把它留在那里以显示我的白痴！ ;) +1！

【解决方案2】：

您可以设置vertical-align css 属性。例如：

            <tr>
                <th rowspan="2" style="vertical-align:bottom">Treatment</th>
                <th rowspan="2" style="vertical-align:bottom">Price</th>
                <th colspan="3">Inclusive Packages*</th>
            </tr>

【讨论】：

【解决方案3】：

您可以使<th> 与中心对齐，它对我来说看起来很干净。

http://jsfiddle.net/8L4a1d2s/

或者你可以按照你在自己的帖子中所说的去做......

【讨论】：