Html 桌子上的课？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5704081/
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
Class on Table?
提问by jamietelin
Is it not possible to style a <table>and its <tr> <td>using css classes?
是否无法使用 css 类设置a<table>及其样式<tr> <td>？
For example:
例如：
<table class="calendar_table">
<tr>
<td>
<h2>Datum</h2>
</td>
<td>
<h2>Event</h2>
</td>
<td>
<h2>Type</h2>
</td>
</tr>
</table>
Then using something like this CSS:
然后使用类似这样的 CSS：
.calendar_table {
width:880px;
}
.calendar_table tr {
margin:0;
padding:4px;
}
回答by David
It is possible, it should work properly!
这是可能的，它应该可以正常工作！
Here is an example
这是一个例子
Have fun, you can do whatever you want! I don't recommend using <table>though, unless it is used to present structured data that is meant to be in a table. If it is to draw a layout, use <div>and CSS!
玩得开心，你可以为所欲为！不过我不建议使用<table>，除非它用于呈现表中的结构化数据。如果是绘制布局，使用<div>和CSS！
回答by user3815508
As Aleks wrote, I would define css for the table itself too. But no nested bracketsin css definition like: table.custom_class { ... td, th { ... }}.
正如 Aleks 所写，我也会为表格本身定义 css。但是css 定义中没有嵌套的括号，例如：table.custom_class { ... td, th { ... }}。
<table class="custom_class">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Giovanni</td>
<td>Rovelli</td>
</tr>
<tr>
<td>Roland</td>
<td>Mendel</td>
</tr>
</table>
The following CSS example can be used:
可以使用以下 CSS 示例：
table.custom_class {
border:solid 5px #006CFF;
margin:0px;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
line-height:22px;
font-size:13px;
font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-weight:400;
text-decoration:none;
color:#0018ff;
white-space:pre-wrap;
}
table.custom_class th {
padding: 20px;
background-color:#98dcff;
border:solid 2px #006CFF;
}
table.custom_class td {
padding: 20px;
border:solid 1px #006CFF;
}
table.custom_class tr {
margin:0;
padding:4px;
}
You can see it in action https://jsfiddle.net/16L9h2ft/
你可以看到它在行动https://jsfiddle.net/16L9h2ft/
回答by justkt
Yes, it's possible. What you have is working to some extent(with tweaks).
是的，这是可能的。你所拥有的在某种程度上是有效的（经过调整）。
To style the td, use:
要设置 td 的样式，请使用：
.calendar_table td {
}
Or:
或者：
.calendar_table tr td {
}
will also work.
也会起作用。
For setting attributes such as borders, colors, and sizes this is the cleaner way to do it, over embedding that information in HTML.
对于设置边框、颜色和大小等属性，这是一种更简洁的方法，而不是将该信息嵌入到 HTML 中。
This approach is great with data tables where the information naturally should be presented in a table. If you are laying out data use more semantically correct tags such as <div>and <span>.
这种方法非常适用于数据表，其中信息自然应显示在表中。如果您要布置数据，请使用语义更正确的标签，例如<div>和<span>。
回答by álvaro González
- Tables expand if necessary to let content fit
- As far as I know, table rows do not have margin or padding
- 如有必要，可扩展表格以适应内容
- 据我所知，表格行没有边距或填充
These layout rules apply no matter how you set it.
无论您如何设置，这些布局规则都适用。
回答by check123
Your approach is perfectly valid!
你的方法是完全有效的！
回答by Diodeus - James MacFarlane
Table rows don't take padding, TDs do.
表格行不需要填充，TD 可以。
Change your style to:
改变你的风格：
.calendar_table td {
margin:0;
padding:4px;
}
回答by Aleks
The answers above are either old, or not answered properly, as they are ignoring the styling of the tableitself and not just tdor thetc. elements.
上面的答案要么过时，要么没有正确回答，因为它们忽略了table本身的样式，而不仅仅是td或th等元素。
If we would have a table like this:
如果我们有一张这样的表：
<table class="custom_class">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row value 1</td>
<td>row value 2</td>
</tr>
</tbody>
</table>
Then in .csswe should put:
然后.css我们应该把：
table.custom_class {
border: 1px solid black;
td, th {
color: blue;
}
}
回答by Sujay U N
Nice looking green table theme :
漂亮的绿色桌子主题：
https://jsfiddle.net/sujayun/qwsLk3aL/
https://jsfiddle.net/sujayun/qwsLk3aL/
table.namTblCls
{
color:purple;
border: #004400 4px solid;
border-collapse: collapse;
font-size:16px;
}
table.namTblCls th
{
text-align: center;
color:yellow;
background-color:#008800;
border: #004400 2px solid;
padding: 20px;
}
table.namTblCls td
{
text-align: center;
padding: 20px;
border: #004400 1px solid ;
border-right-width: 2px;
border-left-width: 2px;
}
table.namTblCls tr:nth-child(odd)
{
background-color: #DDFFDD;
}
table.namTblCls tr:nth-child(even)
{
background-color: #BBFFBB;
}
