Question

我有一个包含两列的表格，我想对它们进行设置样式，使第一列的样式为text-align:left，第二列的样式为text-align:right。

我宣布这样的风格：

const styles = {
    table: {
      width: '100%',
    } 
}

表格如下：

<table style={styles.table}>   
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr>   
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
</table>

一种详细的方法是为每列创建一个样式，并将它们包含在每个<td>中。有没有什么方法可以一次选择所有td（一列）？

Answer 1

只使用伪类。例如：

td:first-child {
  text-align: left;
}
td:nth-chuld(2) {   //You can use :last-child instead of :nth-child(n) in your example
  text-align: right;
}

如果它在组件的开头没有反应原生import './styles.css'并使用className进行样式设置。像这样：<table className='table'>...</table>。

ReactJS为样式选择所有类似的标签

1 个答案: