<分区>
标签 javascript html css reactjs
<分区>
我有以下内容。但样式仅适用于 <th>
.我试过#test-table td, #test-table th {}
和 #test-table td th {}
,但那时什么都没有应用。
CSS:
#test-table td, th {
color: white;
background-color: yellow;
text-align: left;
}
代码:
<table className="test-table">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col2</td>
</tr>
</tbody>
</table>
如何将样式应用于 <td>
和 <th>
? css 选择器(尤其是 ReactJS)的正确层次结构通常是什么?例如容器通常是 className
并且任何内部元素都用 id
定义?
编辑
我怎样才能实现:
尝试了以下但不起作用:
<table className="test-table">
<thead>
<tr>
<th colspan="2">List</th>
<th rowspan="2">Monday</th>
<th rowspan="2">Tuesday</th>
</tr>
<tr>
<th>Names</th>
<th>Class 1</th><th>Class 2</th>
<th>Class 1</th><th>Class 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kev</td>
<td>abc</td><td>def</td>
<td>ghi</td><td>jkl</td>
</tr>
</tbody>
</table>
最佳答案
您需要使用 .
因为您指的是一个类。看看这个 fiddle :http://jsfiddle.net/k7wbzc4j/1/它创建表并应用 CSS。
关于javascript - ReactJS:如何将类名应用于两个元素标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41191280/
相关文章:
PHP 和 PDO 防止 Javascript 注入(inject)
javascript - 在 Highcharts 的工具提示中显示数组中的数组
javascript - React Native - React Native Firebase - Google 登录 Android
javascript - 如何提高 JavaScript 性能/减少大型 HTML 页面上的页面负载?
javascript - Kendo ASP.NET MVC 包装器限制
javascript - forEach 回调不使用 getElementsByClassName 执行