Html 在 <td> 元素中使用类 - 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19246995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using class in <td> element - styling
提问by Smajl
This is probably a very basic question but I cant figure it out with standard approach. I have a table in which I am trying to do a different styling for one column. I thought that the easiest way to do this would use a class="class" property inside this column and then apply styling on it but it doesnt work.
这可能是一个非常基本的问题，但我无法用标准方法弄清楚。我有一张桌子，我试图在其中为一列做不同的样式。我认为最简单的方法是在此列中使用 class="class" 属性，然后对其应用样式，但它不起作用。
This is exmaple of my table (its filled with JSON objects but its not important now):
这是我的表的示例（它充满了 JSON 对象，但现在不重要了）：
<table id="logtable" class="pretty">
<thead>
<tr>
<th>Time</th>
<th>From</th>
<th>To</th>
<th>Payload</th>
</tr>
</thead>
<tbody>
<c:forEach var="message" items="${messages}">
<tr>
<td><c:out value="${message.timestamp}" /></td>
<td><c:out value="${message.sender}" /></td>
<td><c:out value="${message.receiver}" /></td>
<td class="message"><c:out value="${message.payload}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
This is the CSS I use (part of it):
这是我使用的 CSS（部分）：
table.pretty tbody td {
text-align: center;
background: #DEE7EF;
}
This works but when I try to style the last column like this, it doesnt do anything:
这有效，但是当我尝试像这样设置最后一列的样式时，它没有做任何事情：
table.pretty tbody td .message {
text-align: left;
}
What am I doing wrong? Thanks for any tips!
我究竟做错了什么？感谢您提供任何提示！
回答by kamituel
You just need:
您只需要：
table.pretty tbody .message {
text-align: left;
}
(skip the td).
（跳过td）。
This is because .messagemeans basically "any element with the class message".
这是因为.message基本上意味着“具有该类的任何元素message”。
On the other hand, td .messagemeans "any element with the class messageinside any tdelement.
另一方面，td .message表示“任何元素内具有该类的message任何td元素。
回答by Dipesh Parmar
You have space betweeb td and message,
您在 td 和消息之间有空间，
replace
代替
table.pretty tbody td .message {
with
和
table.pretty tbody td.message {
td .messagethis css selector means you are selecting .message which parent is td.
while td.messagemeans tdhaving messageclass.
td .message这个 css 选择器意味着你正在选择 .message 父是 td。while 的td.message意思td是message上课。
回答by staffang
Have you tried the following?
您是否尝试过以下方法？
table.pretty tbody td.message {
text-align: left;
}
I believe the td .message is trying to find a child to the td-element with a class of "message".
我相信 td .message 试图找到一个带有“消息”类的 td 元素的子元素。
Example: http://jsfiddle.net/Sb2w4/
