Html 如何将样式类应用于 td 类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5311890/
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
How to apply style classes to td classes?
提问by martincarlin87
what I am trying to find out is the proper syntax to apply some style to each individual td in my table below:
我试图找出的是将某种样式应用于下表中每个单独的 td 的正确语法：
<section id="shows">
<!-- HTML5 section tag for the shows 'section' -->
<h2 class="gig">Shows</h2>
<ul class="gig">
<!-- Start the table -->
<table>
<tr>
<!-- Setup the header row -->
<th>When</th>
<th>Where</th>
<th>Start</th>
<th>Finish</th>
</tr>
<?php
// some PHP to fetch all the gig entries from the shows table
$shows_query = "SELECT * FROM shows ORDER BY date ASC";
$shows = mysql_query($shows_query);
// a loop to place all the values in the appropriate table cells
while ($show = mysql_fetch_array($shows)){
//begin the loop...
?>
<!-- Start the row -->
<tr>
<!-- Format the date value from the database and print it: -->
<td class="when"><?php
$date = date("l, F j, Y", strtotime($show['date']));
echo "$date";
?></td>
<td class="venue"><?php
echo $show['venue'];
?></td>
<!-- Format the the start and end times and print them: -->
<td class="start"><?php
$time = date("G:i", strtotime($show['time']));
echo "$time";
?></td>
<td class="finish"><?php
$until = date("G:i", strtotime($show['until']));
echo "$until";
?></td>
<!-- Finish this row -->
</tr>
<!-- Some space before the next row -->
<div class="clear"></div>
<?php
// close the loop:
}
?>
<!-- Finish the table -->
</table>
</ul>
</section>
The styling that I have at the moment is:
我目前的造型是：
#shows table.gig { font-size: 25px; }
#shows td.finish { margin-left: 50px;}
I did have a class for the table itself but not sure if it's necessary.
我确实有一个桌子本身的课程，但不确定是否有必要。
The font-size works but what I can't figure out is how to apply the style to the td, th, tr elements etc. I have tried several things but can't seem to get it to work!
字体大小有效，但我不知道如何将样式应用于 td、th、tr 元素等。我尝试了几件事，但似乎无法让它工作！
Any help much appreciated.
非常感谢任何帮助。
Thanks.
谢谢。
回答by moleculezz
Give the table a class name and then you target the td's with the following:
为表指定一个类名，然后使用以下内容定位 td：
table.classname td {
font-size: 90%;
}
回答by Nicolas Le Thierry d'Ennequin
If I remember well, some CSS properties you apply to tableare not inherited as expected. So you should indeed apply the style directly to td,trand thelements.
如果我没记错的话，您应用的某些 CSS 属性table并没有按预期继承。因此，您确实应该将样式直接应用于td,tr和th元素。
If you need to add styling to each column, use the <col>element in your table.
如果您需要为每一列添加样式，请使用<col>表格中的元素。
See an example here: http://jsfiddle.net/GlauberRocha/xkuRA/2/
在此处查看示例：http: //jsfiddle.net/GlauberRocha/xkuRA/2/
NB: You can't have a marginin a td. Use paddinginstead.
注意：您不能在 amargin中包含 a td。使用padding来代替。
回答by GG.
You can use :nth-child(N) CSS selector like :
您可以使用 :nth-child(N) CSS 选择器，例如：
table td:first-child {} //1
table td:nth-child(2) {} //2
table td:nth-child(3) {} //3
table td:last-child {} //4
回答by lecaoquochung
Try this
尝试这个
table tr td.classname
{
text-align:right;
padding-right:18%;
}
回答by Starx
A more definite way to target a td is table tr td { }
定位 td 的更明确方法是 table tr td { }
回答by Hemal
table.classname td {
font-size: 90%;
}
worked for me. thanks.
为我工作。谢谢。
回答by Elamathi Rajendran
Simply create a Class Name and define your style there like this :
只需创建一个类名称并在其中定义您的样式，如下所示：
table.tdfont td {
font-size: 0.9em;
}
回答by Slayer6
When using with a reactive bootstrap table, i did not find that the
与反应式引导表一起使用时，我没有发现
table.classname td {
syntax worked as there was no <table>tag at all. Often modules like this don't use the outer tag but just dive right in maybe using <thead>and <tbody>for grouping at most.
语法有效，因为根本没有<table>标签。像这样的模块通常不使用外部标签，而只是直接使用<thead>和<tbody>分组。
Simply specifying like this worked great though
虽然简单地指定这样的效果很好
td.classname {
max-width: 500px;
text-overflow: initial;
white-space: wrap;
word-wrap: break-word;
}
as it directly overrides the <td>and can be used only on the elements you want to change. Maybe in your case use
因为它直接覆盖<td>并且只能用于您要更改的元素。也许在你的情况下使用
thead.medium td {
font-size: 40px;
}
tbody.small td {
font-size:25px;
}
for consistent font sizing with a bigger header.
使用更大的标题保持一致的字体大小。
