Question

我有一张桌子（下面的代码链接）并且我试图让它变成'处理'和'价格'标题直接放在列'One'和'£''上面，只占用一行，留下两个空白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;
}

codepen在这里：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

Answer 2

您可以设置vertical-align css属性。 E.g：

            <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>

Answer 3

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

http://jsfiddle.net/8L4a1d2s/

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

如何编辑表格列和行？

3 个答案: