Question

我有一个托管在div中的表。表和托管div都没有指定高度。在表标题行之后，每个后续行如下所示：

<tr class="movie-info-row">
    <td>
        <div class="movie-cover">
            <img class="movie-image" src="" />
            <a class="movie-link" href="" target="_blank">IMDb</a>
        </div>
    </td>
    <td colspan=5>
        <div class="movie-details">
            <p class="movie-file"></p>
            <div class="movie-div-left">
                <p class="movie-category"></p>
                <p class="movie-director"></p>
                <p class="movie-insertdate"></p>
            </div>
            <div class="movie-description-container">
                <p class="movie-description"></p>
            </div>
        </div>
    </td>
</tr>

我希望每个表格行（标题除外）具有相同的固定高度，但是在尝试各种方法（当然还有在stackoverflow和其他地方搜索）之后我无法让它工作。< / p>

我的css（语法较少）看起来像这样：

.movie-info-row {
    height: 240px;

    p {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    td {
        height: 100%;
        overflow: hidden;
    }
}

.movie-cover {
    border: 1px solid black;
    width: 130px;
    height: 100%;
    overflow: hidden;
}

.movie-details {
    border: 1px solid black;
    height: 100%;
    overflow: hidden;
}

.movie-file {
    font-size:larger;
}

.movie-div-left {
    float: left;
    width: 40%;
    vertical-align: top;
    display: inline-block;
}

.movie-description-container {
    display: inline-block;
    float: right;
    width: 60%;
    overflow: hidden;
    vertical-align: top;
}

.movie-description {
    overflow: hidden;
}

正如您所看到的，我已将行的高度修正为240px，并且为了获得良好的度量，每个td高度设置为100％并且隐藏溢出。麻烦制造者是描述文本，它可能很长并且与表行高度混淆。正如你所看到的，我已将溢出设置为隐藏在许多地方（这可能是过度杀伤）。注意：这不是特定于浏览器的。我甚至没有使用IE浏览器。我正在使用firefox和chrome（两个最新版本）进行测试。

我真的很茫然。我究竟做错了什么？任何帮助将不胜感激。

ETA：这是现在看起来的表格行的图片：SampleRow

正如您所看到的，描述文本采用了行高。我希望它限制在一个固定的高度 - 基本上是标题图像的高度。是的，我想要所有的信息（还有更多信息）。所以这是不容谈判的。

Answer 1

根据HTML的外观，您的所有数据都会进入一个表格单元格，这是您想要的吗？

为什么不像使用单个标签一样使用单独的标签来构建它，然后为你需要的每一行和它的数据做一个新的？

<tr>
 <th colspan=2>Header</th>
</tr> 
<tr>
 <td>cell 1 data</td>
 <td>cell 2 data</td>
<tr>

然后你可以在css中执行此操作，这将为所有行提供相同的固定高度：

tr {
 height: 240px;
}

这样您就可以使用表头来描述每个列，并使用更少的代码来使其正常工作。或者根据我的理解，你正在尝试做。

Answer 2

太多的隐藏和花车以及诸如此类的东西。简化和征服。您还在另一个选择器（p{} and td{}）

中嵌套了选择器

Demo Fiddle

CSS：

.movie-info-row {
    height: 240px;
}
p {
    margin-top: 2px;
    margin-bottom: 2px;
}
td {
    border: 1px solid black;
    height: 100%;
}
div, p {
    display: table-cell;
}
.movie-cover {
    width: 130px;
    overflow: hidden;
}
.movie-details {
    height: 100%;
    width: 100%;
}
.movie-file {
    font-size:larger;
}
.movie-div-left {
    width: 35%;
    vertical-align: top;
    display: inline-block;
}
.movie-description-container {
    display: inline-block;
    width: 55%;
    vertical-align: top;
}
.movie-description {
    overflow: hidden;
}

修复了html中表格行的高度

2 个答案:

Demo Fiddle

CSS：