上桌上课？答案

【问题标题】：Class on Table?上桌上课？
【发布时间】：2018-02-28 03:33:15
【问题描述】：

是否无法使用 css 类设置 <table> 及其 <tr> <td> 的样式？

例如：

<table class="calendar_table">
<tr>
        <td>
            <h2>Datum</h2>
        </td>
        <td>
            <h2>Event</h2>
        </td>
        <td>
            <h2>Type</h2>
        </td>
    </tr>
</table>

然后使用类似这样的 CSS：

.calendar_table {
    width:880px;
}
.calendar_table tr {
    margin:0;
    padding:4px;
}

【问题讨论】：

你已经写了一个代码，为什么要问，测试它。 :D
我试图记住在 tr 上放置边距和填充是否真的有意义。如果您将这些样式应用于 TD，那么它应该可以工作。
@Chris Margins 不适用于 TR 和 TD 元素。填充不适用于 TR 元素，但适用于 TD 元素。
HTML 有类，CSS 没有。人们错误地称之为“CSS 类”的东西包括属性、规则集、类选择器和（所有）选择器。请避免使用“CSS 类”一词，虽然人们通常可以从上下文中理解您的意思，但最好首先使用正确的术语。
哦，你可能应该用<th scope="col">替换<td><h2>

标签： css html html-table

【解决方案1】：

有可能，应该可以正常工作！

这是example

玩得开心，你可以为所欲为！我不建议使用<table>，除非它用于呈现应该在表格中的结构化数据。如果是画布局，用<div>和CSS！

【讨论】：

谢谢，它确实有效。我有一些奇怪的缓存，因此它没有正确显示。
您可以在浏览器设置中禁用缓存以进行测试或按 CTRL + R 和主要浏览器进行刷新清除缓存。

【解决方案2】：

正如 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>

可以使用以下 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;
}

你可以看到它在行动https://jsfiddle.net/16L9h2ft/

【讨论】：

【解决方案3】：

是的，这是可能的。你有什么is working to some extent（有调整）。

要设置 td 的样式，请使用：

.calendar_table td {
}

或者：

.calendar_table tr td {
}

也可以。

对于设置边框、颜色和大小等属性，这是一种更简洁的方法，而不是在 HTML 中嵌入这些信息。

这种方法非常适用于信息自然应该以表格形式呈现的数据表。如果您正在布置数据，请使用语义更正确的标签，例如 <div> 和 <span>。

【讨论】：

【解决方案4】：

上面的答案要么是旧的，要么没有正确回答，因为它们忽略了table 本身的样式，而不仅仅是td 或th 等元素。

如果我们有这样的表：

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

那么我们应该在.css 中输入：

table.custom_class  {
  border: 1px solid black;

  td, th {
    color: blue;
  }
}

【讨论】：

【解决方案5】：

表格行不需要填充，TD 可以。

改变你的风格：

.calendar_table td {
    margin:0;
    padding:4px;
}

【讨论】：

margin 属性不适用于 TD 元素。

【解决方案6】：

如有必要，表格会展开以适应内容
据我所知，表格行没有边距或内边距

无论您如何设置，这些布局规则都适用。

【讨论】：

【解决方案7】：

漂亮的绿桌主题：

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

【讨论】：