Question

随着 td 的内容增加，的高度不断增加。的高度如何。

HTML：

<table id="depts">
    <tr>
        <th>Topic Title</th>
        <th><a href="create.php?id=1">ADD TOPIC</a></th>
        <th>Posted By</th>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum dolor sit amet, consectetuer.Lorem ipsum dolor sit amet, consectetuerLorem ipsum dolor sit amet, consectetuer</td>
        <td>Lorem ipsum </td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum dolor sit amet, consectetuer  </td>
        <td>Lorem ipsum </td>
    </tr>
        <td colspan="2">Lorem ipsum dolor sit amet, consectetuer  </td>
        <td>Lorem ipsum </td>
    <tr>
        <td colspan="2">Lorem ipsum dolor sit amet, consectetuer  </td>
        <td>Lorem ipsum </td>
    </tr>
</table>

CSS：

    #depts {
        width: 500px;
        border-spacing: 0;
    }
    #depts a {
        text-decoration: none;
        color: white;
        background-color: blue;
        padding: 10px;      
    }
    #depts th {
        border-top: 1px solid black;    
        background-color: #009688;
        text-align: left;
        color: white;
        padding: 5px;
    }
    #depts th:first-child {
        border-left: 1px solid black;
        border-top-left-radius: 5px;
    }
    #depts th:last-child {
        border-right: 1px solid black;
        border-top-right-radius: 5px;
    }
    #depts td {
        border: 1px solid black;
    }

当 td 只有一行内容时，输出为

当 td 有多行内容时，输出为

要求输出：

Answer 1

对于所需的输出，您需要在添加主题按钮

上使用position: absolute;

    #depts a {
    text-decoration: none;
    color: white;
    background-color: blue;
    padding: 20px 10px; 
    position: absolute;
    top: -6px; right: 150px;
    width: 90px;
    }

https://jsfiddle.net/gt2q9n5L/喜欢这个。这并不完美，但表格布局不会让你打破边界。

因为它是一个表，你需要为正确的位置添加ghost列：绝对样式（例如，如果你wesbite是响应的话）

Answer 2

您应该在th标记内嵌入thead个元素的行，并在td标记内嵌入tbody个标记，如下所示：

<table id="depts">
    <thead>
        <tr>
            <th>Topic Title</th>
            <th><a href="create.php?id=1">ADD TOPIC</a></th>
            <th>Posted By</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">Lorem ipsum dolor sit amet, consectetuer.Lorem ipsum dolor sit amet, consectetuerLorem ipsum dolor sit amet, consectetuer</td>
            <td>Lorem ipsum </td>
        </tr>
        <tr>
            <td colspan="2">Lorem ipsum dolor sit amet, consectetuer  </td>
            <td>Lorem ipsum </td>
        </tr>
            <td colspan="2">Lorem ipsum dolor sit amet, consectetuer  </td>
            <td>Lorem ipsum </td>
        <tr>
            <td colspan="2">Lorem ipsum dolor sit amet, consectetuer  </td>
            <td>Lorem ipsum </td>
        </tr>
    </tbody>
</table>

thead标记用于表头。 tbody标记用于表正文。

表格页脚还有一个tfoot标记。

希望这有帮助。

http://www.w3schools.com/tags/tag_thead.asp

Answer 3

使用内联css put style =“table-layout：fixed;”或者你可以放入css，但这会使文字或图像重叠到宽度的其他列中太小。不要放置大量没有空格的文字或短语。

Answer 4

试试这个：

的补充

#depts th {
   height: 50px;
}

<强> CODE

<!DOCTYPE html>
<html>
<head>
<style>
    #depts {
        width: 500px;
        border-spacing: 0;
    }

    #depts a {
        text-decoration: none;
        color: white;
        background-color: blue;
        padding: 10px;
    }

    #depts th {
        border-top: 1px solid black;
        background-color: #009688;
        text-align: left;
        color: white;
        padding: 5px;
    }

    #depts th:first-child {
        border-left: 1px solid black;
        border-top-left-radius: 5px;
    }

    #depts th:last-child {
        border-right: 1px solid black;
        border-top-right-radius: 5px;
    }

    #depts td {
        border: 1px solid black;
    }

    #depts th {
        height: 50px;
    }
</style>

<table id="depts">
    <tr>
        <th>Topic Title</th>
        <th><a href="create.php?id=1">ADD TOPIC</a></th>
        <th>Posted By</th>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer </td>
        <td>Lorem ipsum </td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer </td>
        <td>Lorem ipsum </td>
    </tr>
    <td colspan="2">Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer </td>
    <td>Lorem ipsum </td>
    <tr>
        <td colspan="2">Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer </td>
        <td>Lorem ipsum </td>
    </tr>
</table>

Answer 5

尝试了各种各样的事情。 th 的宽度达到33％。这有效：

    #depts th {
        border-top: 1px solid black;    
        background-color: #009688;
        text-align: left;
        color: white;
        padding: 5px;
        width: 33%;
    }

Answer 6

这是因为a元素不是块内联。

参考：http://www.w3schools.com/html/html_blocks.asp

-

如果你愿意的话，你可以简单地阻止并让它浮动。

以下是您的原始代码：https://jsfiddle.net/m52mv11x/

以下是经过编辑的代码：https://jsfiddle.net/ss2ksjq7/

我刚刚添加了这一行：display: block; float: right;就像这样：

#depts a {
    text-decoration: none;
    color: white;
    background-color: blue;
    padding: 10px;      

    /*This is th just aitional line*/
    display: block; float: right;
}

或者你可以height: 40px; #depts th这样：https://jsfiddle.net/2raes3dc/

如何保持固定的高度

6 个答案: