如何保持固定的高度(how to keep fixed height for th)

随着td含量的增加， th的高度不断增加。如何保持固定的高度。

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有多行内容时，输出为

所需产量：

The height of th keeps increasing as the content of td increases.How to have a fixed height for th.

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

When td has only one line of content,the output is

When td has multiple lines of content,the output is

required output:

最满意答案

对于所需的输出，您需要使用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是响应的例子）

Tried various things.Set width of th to 33%.This works:

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

更多推荐