css - 使用CSS更改表格设计的按钮颜色

Question

考虑以下代码显示由表格构成的两个不同按钮(<tbody class="btn btn-left"> 是一个按钮，<tbody class="btn btn-right"> 是另一个按钮:

<table>
<tbody class="btn btn-left">
  <tr>
     <td class="btn-tl"></td>
     <td class="btn-tc"></td>
     <td class="btn-tr"></td>
  </tr>
  <tr>
     <td class="btn-ml"></td>
     <td class="btn-mc"></td>
     <td class="btn-mr"></td>
  </tr>
  <tr>
     <td class="btn-bl"></td>
     <td class="btn-bc"></td>
     <td class="btn-br"></td>
  </tr>
</tbody>
</table>

<table>
<tbody class="btn btn-right">
  <tr>
     <td class="btn-tl"></td>
     <td class="btn-tc"></td>
     <td class="btn-tr"></td>
  </tr>
  <tr>
     <td class="btn-ml"></td>
     <td class="btn-mc"></td>
     <td class="btn-mr"></td>
  </tr>
  <tr>
     <td class="btn-bl"></td>
     <td class="btn-bc"></td>
     <td class="btn-br"></td>
  </tr>
</tbody>
</table>

css 正在工作，但没有针对我需要的 td

.btn-left {
    background-color: red;
    border-color: red;
}

.btn-right {
    background-color: blue;
    border-color: blue;
}

您将如何设置 css 以便一个按钮显示一种颜色而另一个按钮显示另一种颜色？

感谢您的帮助。

Answer 1

首先 - 您必须使用表格标签。

然后将以下类放入您的样式表中:

.btn-left { color: blue; }
.btn-right { color: red; }

a liddle fiddle