html修复第一列和相同高度的其他列

时间:2014-08-17 17:05:05

标签: html css

我想要修复表格的第一列,但是我有一个问题,即如果第一列的高度高于其他列,则其他列的高度不同。

这是我的代码:

<div class="outer">
  <div class="inner">
    <table>
        <tr>
          <th>Header A</th>
          <td>col 1 - A</td>
          <td>col 2 - A (WITH LONGER CONTENT)</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          <th>Header B</th>
          <td>col 1 - B</td>
          <td>col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
        </tr>
        <tr>
          <th>Header C
          Header C
            Header C
            Header C
          </th>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
        </tr>
    </table>
  </div>
</div>

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px;/*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding:10px;
  width:100px;
}
th {
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  width:100px;
}
.outer {position:relative}
.inner {
  overflow-x:scroll;
  overflow-y:visible;
  width:400px; 
  margin-left:100px;
}

这是一个例子;我怎么解决它?

http://jsbin.com/uxecel/4457/edit

我希望行高在所有行中都相同,而不是固定,因为这是dinamic。

由于

1 个答案:

答案 0 :(得分:0)

你是说这个吗?

http://jsfiddle.net/AlexCharlton/5d4yqn7a/1/

添加:

height: 80px;

要:

td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  height: 80px;
  padding:10px;
  width:100px;
}

或者,他们就是这种方法,您可以将类应用于特定的行/列,如下所示。

http://jsfiddle.net/AlexCharlton/5d4yqn7a/2/

HTML:

<td class = "Long">col 2 - A (WITH LONGER CONTENT)</td>

CSS:

td.Long {
   width: 280px;
}